ajax学习笔记

Posted 2020-09-03 北纬95度

　　在很早之前，就已经接触过ajax了，包括原生ajax请求方式、跨域ajax请求方法、HTTP的相关知识。这次写ajax主要是对之前学习的知识的一个回顾会总结吧，因为我发现之前好像被我玩的滚瓜烂熟的东西渐渐被我忘记了。我发现这个淡忘很可怕，回顾我之前学的那些知识，发现好多东西都是模模糊糊的有些映像，可是真的要去想又想不起来了，所以我觉得能有个平台，把自己学习的东西记录下来。这样，不管是分享还是回顾，对于一个开发人员来说都是很不错的。

　　先来说说最基础的吧，ajax其实在很早就已经提出了，具体时间呢，对于一心想着学技术的人来说，我只能说，我也忘了。。。不过时间并不是关键，关键在于为什么要有ajax，要ajax有什么用。ajax的出现最开始是为了解决以前表单难的问题，在没有ajax技术之前，用户如果要填写一个很长的表单，然后他花了半天的时间来填写表单，然后点击了下提交。这时候就把数据发送到了后台，后台经过一系列的验证后，发现你其中一项没有填写，这时候你又要重新检查你填写的表单，然后填写完了之后提交，又花了半天时间后台验证完了之后。发现你填写的电话号码不正确。这样来来回回好几次之后，十有八九用户不是开始骂人了，就是已经果断关闭了你的网页了。这时候，ajax的出现就变得很有必要了，通过ajax，我们可以实现用户每输入完成一条信息，就可以发送一次异步验证，判断用户填写的信息是否符合要求。这样，用户就能很直观的看到填写的数据是否规范，是否漏填了说明数据。

　　说了ajax的好处之后，就说点实际的内容吧，既然ajax那么好，我们要怎么去使用它呢，首先，我们就要创建一个异步对象

var request=new XMLHttpRequest();

　　不过这里有一个问题，就是ie5和ie6是不支持这个对象的，所以我们可以写个兼容性代码

var request;
if(window.XMLHttpRequest){
    request=new XMLHttpRequest();//兼容IE7及以上
}else{
    request=new ActivveXObject("Microsoft.XMLGTTP");//兼容IE5，IE6
}

　　这样，我们就创建了一个兼容的ajax对象。创建了ajax对象之后，我们就可以像后台来发送数据了。发送请求要用到一个open方法和send方法，先来说说open方法，open方法用来定义请求的方式（GET或者POST，GET一般用于信息的获取，使用url传递参数，对发送的信息有所限制，最大不超过2000字符。POST一般用于修改服务器上的资源，对发送信息数量理论上来说是无限大的），请求的路径和是否异步，也就是说他接收三个参数，比如：

open(‘GET‘,‘index.php‘,true);

　　第三个参数默认就是true，表示是异步的，所以可以不填。然后就是send，他就接收一个string类型的参数，用来写入要传输的数据，一般来说，如果请求为get，数据都是通过url后跟跟参数的方式传输的，所以如果open中的方法为get的时候，这里的值一般都为空，如果方法为post，那么，数据就可以填在send中。再用post传输数据的时候，一定要记得添加一个请求头，用来告诉服务器这是表单提交。代码如下：

request.setRequestHeader(‘Content-type‘,‘application/x-www-form-urlencoded‘);

　　这样，我们就实现了像后台发送数据，不过，我们要怎么判断服务器是否接收到数据了呢，这时候就要用到一个对象来监听这个请求了

　

request.onreadystatechange=function(){
    if(request.readystate===4&&request.status===200){
        console.log(request.responseText);
    }
}

　　这里多了好几个新方法，不过都很简单，首先是onreadystatechange,这个就是我之前说的监听服务器状态的的对象，那监听了之后怎么看服务器是什么状态呢，这时候就要用到函数里面readystate和status两个属性了。readystate一共有五个取值，分别是：

　　　　0：请求初始化，open还未调用

　　　　1：服务器连接已建立，open已调用

　　　　2：请求已接收，接收到请求头信息

　　　　3：请求处理中，接收到了响应主体

　　　　4：请求已完成，响应已就绪

　　同样的，status的取值有很多，不过我们最关心的还是他请求成功的状态，也就是status等于200的时候。当readystate等于4，并且status等于200的时候，表示请求完成了，这时候，我们就要可以对响应的数据进行一些操作了。这里操作的方法有很多，比如

　　　　responseText：获得字符串形式的响应数据

　　　　responseXML：以数字和文本形式返回HTTP状态码

　　　　status和statusText：以数字和文本的形式返回HTTP状态码

　　　　getAllResponseHeader():获取所有的响应报头

　　　　getResponseHeader():查询响应中某个字段的值

　　除了原生的方法之外，jquery中也有封装好的ajax请求，这里我就不多提了，有兴趣的话可以查阅jquery关于ajax的文档

　　这样子，一个完整的ajax请求就完成了。这里，我还要再拓展两点内容，一个是HTTP协议，另一个是跨域问题，这两个东西在提到ajax的时候总是会随之而来的。

　　首先来说说HTTP，到底什么是HTTP，简单来说，HTTP就是一种通过计算机网络进行通信的规则。他是一种无状态协议，可能第一次听这个会感觉有点蒙，不过不用这么在意，因为这只是个拓展的内容，了解他能有助于我们更深入的了解前后端之间的交互，当然，如果不会对于初级程序员来说也不会造成太大的影响，初级程序员能掌握简单的ajax发送请求和接受数据就够了。HTTP请求简单来说分以下七个步骤：

　　1.建立TCP链接

　　　　2.web浏览器向web服务器发送请求命令

　　　　3.web浏览器发送请求头信息

　　　　4.web服务器应答

　　　　5.web服务器发送应答头信息

　　　　6.web服务器向浏览器发送数据

　　　　7.web服务器关闭TCP链接

　　那HTTP请求又请求了什么数据呢？又或者说，他的请求中包含了什么东西呢？HTTP由四部分组成，分别是

　　　　1.请求的方法和动作，也就是你的method是GET还是POST

　　　　2.请求的地址，也就是数据发送到哪里去

　　　　3.请求头，他包含了一些客户端的信息，包括一些身份验证信息

　　　　4.请求体，包含了客户提交的字符串信息和表单信息

　　发送了请求之后，服务端也会给我们一定的响应，这个响应由三部分组成，分别是：

　　　　1.一个数字和文字的状态码，用来显示请求成功或失败

　　　　2.响应头：类似于请求头，包含服务器信息例如服务器的类型，日期和时间，内容类型和长度

　　　　3.响应体：服务端响应的正文

　　HTTP的响应的状态码有很多，不过也不出五种类型：

　　　　1XX：信息类，标识web服务器接收到请求，正在进一步处理

　　　　2XX：成功，标识用户请求被正确接收，理解和处理

　　　　3XX：重定向，标识请求没有成功，客户必须采取进一步的动作

　　　　4XX：客户端错误，表示客户端提交的请求有错误

　　　　5XX：服务器错误，表示服务器不能完成对请求的处理

　　说完了HTTP协议，再来说说跨域的问题，在平时简单的项目中，可能不会涉及到这个，问题，但是如果项目中有需求需要你去访问不同域的数据的时候，就会出现跨域问题了，那什么叫跨域呢，在了解跨域之前，我们要先了解网址的组成，就拿http://www.abc.com:8080/script/jquery.js这个网址来说，http://是他的协议名，www是子域名，abc.com是主域名，8080是端口号，/script/jquery.js是请求的资源地址。当然我们平时可能看到过www.abc.abc.com的域名，这里www.abc是子域名，abc.com是主域名。在了解了网址的组成之后，再来了解跨域就简单了，跨域就是当协议，子域名，主域名，端口号中的任意一项不同的时候，请求资源就会跨域。那要怎么解决跨域呢？这里有三种解决办法，一种是依靠后台，建立一个代理，然后通过这个代理去访问不同域的资源，这样，就不会造成跨域了。还有一种比较普遍的前端解决办法是使用jsonp，他利用的是script的src属性不收同源策略的原理，通过script标签去访问不同域的资源。首先我们要先在自己的文件中写一个函数，然后在请求回来的资源中写一个函数的调用就可以了。当然我们也可以使用jquery中的方法，只需要在$.ajax参数中加一个jsonp参数并且赋值一个函数名，并且把dataType改成jsonp就好了。不过这里要注意的一点是，jsonp不支持post方法，因为他是通过url来传参数的。

　　在html5的新特性中，也有了跨域的解决办法，只需要在服务端加两个条件就好了

　　　　header(‘Access-Control-Allow-Orign:*‘);

　　　　header(‘Access-Control-Allow-Methods:POST,GET‘);

　　不过，这个新特性只兼容IE10及以上的版本。