关于对ajax的兼容性问题以及冒泡和捕捉的兼容性处理

2024-04-07 00:08| 来源: 网络整理| 查看: 265

首先众所周知，AJAX原生代码需要五步走，这也是技术本身决定的，毕竟AJAX是建立在http协议上的技术。

闲话少说，开始写代码。

首先关于ajax的创建 //在Google下的创建 new XMLHttpRequest() //IE兼容性问题 new ActiveXObject("Microsoft.XMLHTTP")

而关于使用ajax经典的说法是通过五步走来实现 · 首先第一步是创建ajax对象，就是上面所说的那种样子，可以封装一个createAjax()函数来使用。 · 第二步就是初始化对象，这里需要注意一点IE兼容性问题，由于IE在缓存方面的一些设定，所以需要我们注意在通过GET请求获取ajax对象的时候，注意避免IE缓存问题，有三种方法，但是综合比较来说，还是在URL添加随机数字来避免IE缓存比较靠谱，设置请求头即

//默认已经将创建ajax的方法封装了 let ajax = createAjax(); //初始化 ajax.open('get',file+'?'+data+"&"+Math.random()); //或者通过设置请求头来解决 ajax.setRequestHeader('If-Modified-Since',"0"); //但是注意这个方法与CORS跨域技术不兼容

第三步发送请求，这一步GET请求由于请求数据在URL地址后面传输，不需再次传输，所以这个请求内容可以为空 ajax.send(null); 第四步，等待服务器响应，服务器会返回两个参数，分别是ajax.readyState ajax通信状态码和 ajax.status HTTP响应状态码。而等待响应的事件则是，ajax.onreadystatechange

返回来的两个事件状态码具体说一下：首先关于ajax通信状态码，有5个值： 0：初始值，代表已经创建ajax对象，但未初始化 1: 已经初始化了，但未发送请求 2：已经发送请求，但没有受到响应 3：已经收到响应，但没有接收完毕 4：接受完整响应而这个HTTP响应状态码就是所熟知的restful规范 200 成功 304 使用缓存 404 页面未找到 403拒绝访问 504 网关超时 500 服务器内部错误等

所以这一步就是要判断 ajax.readyState ==4 同时 ajax.status ==200 ，这样才能走第五步

第五步就是得到数据，利用这些数据进行一些DOM操作什么的，ajax.responseText，这个由于ajax支持的数据类型有XML和JSON 以及文本，所以还需要进行判断解析后才能使用接收的数据。

以上就是ajax的五步走，但只是说了GET请求，POST请求与GET请求的区别只是在与，传参，以及，传参时需要设置POST专属请求头

setHeader("Content-type","application/x-www-form-urlencoded")

即可

关于阻止事件冒泡的兼容性处理

【本文地址】

公司简介

联系我们