ajax整理，送给小伙伴

Posted 2021-04-15 星脑

1.ajax介绍
名称：Ajax：异步的 javascript 和 XML；
特点：能够在不重新加载页面的情况下，局部刷新某些数据。
2.ajax原理
 
   
   
 

  
    
    
  
Ajax利用的是XMLHttpRequest对象。首先创建XHR对象的实例，如果浏览器支持XHR对象，则创建XHR的实例，否则创建IE的ActiveXObject对象，这里没有对IE7以及以下进行兼容。
 
   
   
 
function createXHR() {    if (window.XMLHttpRequest) {        return window.XMLHttpRequest();    } else {        return new ActiveXObject("Microsoft.XMLHTTP");    } }
分析需要用到的XHR对象相关内容：
1.open() 2.send() 3.status 4.readyState
responseText:响应被返回的文本 responseXML: status:http的响应状态 statusText:http状态说明
0：未初始化，open()方法还未调用 1：启动，已经调用open()方法，但是还没有到send() 2：发送，已经调用了send()，但是还未收到响应 3：接受，已经收到了响应，但是还未接收完 4：完成，响应已经全部接受
由此，我们可以看到，通过监测readyState和status属性，就可以掌握到客户端是否能够取得响应以及何时接收了响应。
readyStateChange事件，在每次readyState发生改变时，都会自动调用，因此我们可以这样写：
function submitData() {    let xhr = createXHR();    xhr.onreadystatechange = function() {        if (xhr.readyState == 4) {            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {                alert(xhr.responseText);            } else {                alert("request was unsuccessful: " + xhr.status);            }        }    };    xhr.open("post", "url", true);    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");    let data = {  //数据主体        'userId': 123456,        'userName': 'xiaoming'    }    xhr.send(data); }
这里需要注意的是，readyStatechange事件要写在open()方法之前。
3.其他事项
 
   
   
 

  
    
    
  
GET&POST
GET应该是最常用的服务器请求类型，在拼接字符串时，一定要注意key和value都要encodeURIComponent()一下，避免字符串的格式问题。
POST请求则需要我们添加 Content-Type属性为application/x-www-form-urlencoded，模拟表单提交。曾经有一次提交时数据，就是忘了添加Content-Type导致后台根本就获取不到数据。
  
    
    
  
FormData
FormData是XMLHttpRequest2级规范里面的一部分内容，它的作用是将表单数据进行序列化，当然我们也可以将我们定义的数据传入到FormData中。
FormData用法有两种：
 
   
   
 
1.  var data = new FormData();    data.append("name", "Nicholas")  
通过append方法，将数据填充到FormData中，另外一种：
var data = new FormData(document.forms[0]);
直接将表单元素传入FormData，直接就可以获取到表单数据，并进行序列化。
FormData的另外一个作用就是不需要再写Content-Type，XHR对象识别FormData的同时，会自动替我们加上请求头信息。
 
   
   
 

  
    
    
  
timeout超时设定
超时设定目的是防止因为各种因素，导致请求无限等待。这个就很简单了
 
   
   
 
xhr.timeout = 1000;   //设置超时时间为1000 xhr.ontimeout = function(){  alert("大兄弟，已经超时了"); }
4.跨域问题
在我开始进行前后台交互的时候，跨域问题真的恶心的一匹。不过，现在我们只需要在后台设置好
Access-Control-Allow-Origin: reqs.getHeader("Origin") 或者 * 或者 your domin
不推荐使用*虽然reqs.getHeader("Origin")与*的效果相同，在是在一些情况下使用*是会报错的。
当然，常见的跨域解决方式还有服务器代理和jsonp，这两种方式下一篇儿再写吧。

扫码关注↓↓↓

想看原文可以点击阅读原文↓↓↓