Ajax详解

2018-08-03 本文已影响294人码课sir

一、Ajax概述

1、Ajax介绍

（1）AJAX全称:
Asynchronous: 异步（默认true） synchronous(同步false)
Javascript:核心技术还是js
And:
Xml:主要作为不同开发语言之间传输数据的标准(xml、json)
直译:异步的javascript和xml
简单的说Ajax就是一门可以与服务器进行异步或者是同步交互的一门技术,可以实现页面无刷新与服务器进行数据的交互。

简单说，同步和异步交互就是在于代码的执行顺序。
同步代码按照顺序运行，异步代码不按照顺序运行。

举例说明：以同步或异步的方式去做饭
同步方式：只能等饭煮熟了后，再去炒菜或菜熟了再去煮饭。
异步方式：饭正在煮的时候，我们可以去炒菜。
显然，异步方式编程效率更高效。

同步代码会再造成代码的阻塞，因为同步代码在内存栈区执行，严格按照顺序来执行。异步代码是不会阻塞的。且只有栈中同步代码执行完毕之后，才执行异步的代码。

2、Ajax实际应用场景

①无刷新搜索
②无刷新验证邮箱或者手机号或者用户名的唯一性
③无刷新分页
好处：①减少数据库服务器的压力 ②提高用户体验

二、Ajax对象

1、创建ajax对象
创建Ajax对象的主要考虑主流的浏览器（W3C）还有低版本的IE浏览器.

主流W3C标准浏览器 (google,firefox,operate,高版本的IE浏览器,safari):
var xhr = new XMLHttpRequest(); 重点掌握，注意字母大小写

低版本的IE浏览器(IE6,7,8)(了解即可)
var xhr = new ActiveXObject('Microsoft.XMLHTTP');

更低版本的IE浏览器(了解即可)
var xhr = new ActiveXObject("Msxml2.XMLHTTP");

代码如下：

<title>Document</title>
<script type="text/javascript">
        //主流浏览器创建ajax对象(google、firefox、高版本IE、safari)
        var xhr = new XMLHttpRequest();
        //低版本IE创建ajax对象
       //var xhr = new ActiveXObject('Microsoft.XMLHTTP'); 
        console.log(xhr);
</script>

2、封装兼容浏览器通用的Ajax对象
a、通过try-catch实现，代码如下：

//封装通用的ajax对象
function createXhr(){
    var xhr = null;
    try{
        //主流浏览器
        xhr = new XMLHttpRequest();
    }catch(e){
        //低版本IE
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //返回创建好的xhr对象
    return xhr;
}

b、通过把创建ajax对象的方法名作为window全局对象的属性判断来实现。
使用的时候的，直接在html文件引入下面createXhr.js文件，调用上面封装好的方法即可：

function createXhr(){
    var xhr = null;
    //先考虑主流的
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }else{
        alert('请升级您的浏览器，推荐安装google浏览器');
    }
    
    //返回创建好的xhr对象
    return xhr;
}

三、Ajax入门案例

1、使用Ajax的get请求获取服务器响应数据

Ajax中的get请求的总结（四步曲）
第一步：创建ajax对象
第二步：给ajax的请求状态改变，绑定监听的事件处理程序，在判断状态等于4且状态码等于200，接收服务端响应回来的数据，处理自己的业务逻辑
第三步：建立一个http连接
第四步：发送http连接

2、使用Ajax发送POST请求获取服务器响应数据

Ajax中的post请求的总结（五步曲）
第1步：创建ajax对象
第2步：给ajax的请求状态改变，绑定监听的事件处理程序，在判断状态等于4且http状态码等于200，接收服务端响应回来的数据，处理自己的业务逻辑
第3步：建立一个http连接
第4步：设置post请求头，模拟post表单来传递数据给服务端（否则获取不到send()中的参数）
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
第5步：发送http连接

3、get和post请求总结

get是四步走，post是五步走。

get：其中有三步一定要按照如下顺序：
1、创建ajax对象 new XMLHttpRequest
2、创建一个http请求 open
3、发送一个http请求 send

至于xhr.onreadystatechange = function(){}这一步，放在上面三步中的任意一步后面都可以，因为我们都可以捕获到状态等于4。建议，此步放在创建ajax之后，因为可以监听更多的状态。

post：其中有四步一定要按照如下顺序：
1、建ajax对象 new XMLHttpRequest
2、创建一个http请求 open
3、设置post请求头 setRequestHeader
4、发送一个http请求 send

至于xhr.onreadystatechange = function(){}这一步，放在上面四步中的任意一步后面都可以，因为我们都可以捕获到状态等于4。建议，此步放在创建ajax之后，因为可以监听更多的状态。

四、Ajax异步和同步运行的原理

Ajax同步：首先代码从上到下按照执行，如果遇到了同步的Ajax代码段，只有等同步的Ajax程序执行完毕之后，其后面的代码才会执行。若Ajax同步的代码还没执行完毕，其后面的代码是一直处于阻塞状态。

Ajax异步：首先代码从上到下依次执行，如果是遇到异步的Ajax代码段，则浏览器会新开一个线程去处理异步的Ajax代码，对后面的代码没有影响，依然按顺序执行，即异步后面的代码不会出现阻塞的情况。

特别注意，JavaScript引擎是在栈中单线程执行js代码，异步的ajax代码是浏览器新开启一个线程单独去执行异步代码的，同步则不会开启新线程。（浏览器是多线程的）

五、Ajax跨域

1、介绍

因为由于浏览器的同源(域)策略,禁止ajax从一个域名请求另外一个域名上的数据

2、如何才算跨域

如一个普通的url地址如下:

http://www.abc.com:80/index.html

我们可以把上面的url地址分为四个部分:

协议:http,https

一级(顶级)域名:abc.com baidu.com

二级域名:www.abc.com 、 blog.abc.com image.baidu.com

端口号:http协议默认是80端口,https默认是443

以上四个部分,ajax请求的时候只要有一个地方不一样都算做跨域请求。

3、解决跨域的办法

主要有以下三种解决方法：重点掌握通过php代理的形式完成跨域请求。

由于浏览器的同源策略影响，ajax只能访问同域名下的文件，因此要是实现跨域一般有以下几种方案：

第一种：通过php代理去请求。

注：服务端语言php是没有跨域限制的。

第二种：通过CORS方式。

这是html5提供解决跨域限制的一种办法。在请求的服务端页面中设置以下响应头即可，告诉浏览器可以跨域请求。
header(“Access-Control-Allow-Origin:*”)； // *代表允许所有域名访问
header(“Access-Control-Allow-Origin:http://native.com”)； // 值只允许nativa.com访问
一般不会使用CORS方式：IE10以下不支持。

第三种：通过jsonp实现，实质通过script标签的src属性完成跨域。

jsonp只是一个约定跨域的形式。跟json没有关系。
jsonp跨域原理：

就是利用<script>标签没有跨域限制的，从而达到与第三方网站通讯的目的。当需要通讯时，本站(local.com)通过js创建一个<script>标签，其src属性值指向第三方网站(native.com)的一个php文件的地址。
特别注意：jsonp只针对get请求。
如：<script src="http://native.com/index.php?callback=fnName"></script>
本站（local.com）设置好一个js回调函数（fnName）
第三方网站(native.com)输出一个js执行函数的形式，并且传递json数据作为函数参数。（故称之为jsonp，即json padding）