ajax做的一些总结

标签：cti   lse   new   ==   重复加载   res   get请求   pen   回调   

以下是我对ajax做的一些总结，仅供记录，有不对的地方欢迎指正。

1, ajax的出现改变了网页交互方式，之前是更新网页需要重复加载整个网页，ajax出现之后，只需要根据需求请求，然后根据返回数据更改页面需要变更的地方，大大提高了网页性能。 2, ajax的使用形式：

• 实例化一个XMLHttpRequest对象，
• 绑定readyState改变时调用的回调
• 使用open,send方法即可 代码如下：

var xhr
// 实例化一个 XMLHttpRequest 对象
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6及以下
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 绑定 xhr.readyState 改变时调用的回调
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.responseText)
      console.log(‘请求成功‘)
    } else {
      console.log(‘请求错误‘)
    }
  }
}
// 初始化请求
xhr.open(‘GET‘, ‘/api/hello‘);
// 设置请求头（可选）
xhr.setRequestHeader(‘Accept‘, ‘*/*‘)
// 发出请求
xhr.send();

3, ajax实现异步请求，用户无需等待返回而在请求过程中可以继续浏览。 4, ajax请求返回有几种状态，根据每种状态做相应代码处理。 5, ajax可以设置请求头（提供的有方法）。 6，在html5之后，统一了XMLHttpRequest规范，更新了新的内容：

• 上传文件
• 设置http请求超时时间
• 可以获取服务端的二进制文件
• 支持跨域
• 获取数据传输的进度信息
• 通过formData发送表单信息

7, 关于跨域：ajax之前，是使用JSONP来解决跨域，之后选择CORS解决跨域（关于JSONP解决方法：https://www.cnblogs.com/chq1024/p/12685779.html，关于CORS解决方法：http://www.ruanyifeng.com/blog/2016/04/cors.html）

8，CORS与JSONP的使用目的相同，但是比JSONP更强大，JSONP只支持get请求，CORS支持所有类型的http请求，JSONP的优势在于支持老式的浏览器，以及向不支持CORS的网站请求数据。

ajax做的一些总结

标签：cti   lse   new   ==   重复加载   res   get请求   pen   回调   

原文地址：https://www.cnblogs.com/sinceForever/p/14780212.html