ajax-原理分析

 

createTime--2016年9月19日13:59:11
Author:Marydon
参考链接
http://blog.csdn.net/csh624366188/article/details/7670500
　　Ajax（Asynchronous JavaScript and XML），异步的JavaScript与XML 。所谓同步，就是在进行一个操作之前必须要等到上一个操作返回操作结果才能进行这个操作，而异步则是在进行一个操作时可以不受上一个操作的影响，上一个操作是否返回操作都可以执行这个操作，各个操作可以同时进行，对用户来说，不用等待了，不用等待上一个操作就可以执行新的操作了。给用户的体验增强了。异步传输是面向字符的传输，它的单位是字符；而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。 其实ajax并不是什么新技术，而是一些技术的组装。Ajax给我们的网络带来了很大的好处，假如我们只是简单的提交一个表单，我们就没必要刷新整个页面，只需要局部表单提交，刷新局部就可以了，这将大大减少了网络流量。有优点的同时他也有缺点，缺点就是我们浏览器上的后退和前进按钮就失效了。假如我们页面有三个异步ajax操作，浏览器并不把他当作三个请求操作，后退的时候也不会后退三次回到原始页面
　　Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
　　Ajax中最重要的一个对象就是XMLHttpRequest，这个对象最早是由微软在IE中以插件的形式提供的，但微软只是简单的提出这么一个对象，并没有真正的去实用它，后来其他浏览器也给出了这个对象，但他们都是提供的内置对象，而不是简单的插件的形式了。所以在获得这个对象的时候就避免不了要用if。。Else判断了、判断是否为IE浏览器，我们使用判断一个对象是否存在来判断，这个对象是IE所特有的，他就是active控件的对象。通过window.ActiveXObject，在if语句中写这么语句，因为在javascript中，如果不是undefined或者false他就是为true，所以，只要这个active空间存在，if条件就为真。也就是说就是IE浏览器。IE获得XMLHttpRequest对象是一个固定形式：xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");这是IE特有的获得XMLHttpRequest对象的方式，其他浏览要想获得XMLHttpRequest对象直接new就可以，也就是xmlHttpRequest =new XMLHttpRequest（）；虽然IE和其他浏览器获得XMLHttpRequest对象的方式是不同的，但是XMLHttpRequest的使用方式是一样的。
好了，判断完浏览器之后，我们就开始准备向服务器发送请求了，准备发送请求我们用：xmlHttpRequest.open("POST", "AjaxServlet", true);这里的三个参数我们有必要说一下，第一个参数是表示我们的请求是以什么形式发送，第二个参数是我们请求的地址，这里我们的地址是一个servlet，第三个参数指明是否为以异步的形式发送请求，一般我们都会设置为true。
　　准备好发送以后，我们要给他接收做一下准，ajax接收数据是以一个回调函数的形式接收数据的。也就是说我们注册好这个回调函数后，当达到某一要求时他会自动调用这个回调函数，然后去执行回调函数的内容，注册回调函数：xmlHttpRequest.onreadystatechange = ajaxCallback;注意这个回调函数ajaxCallback不要带括号。这个回调函数注册点我们从字面上也可以看出,他是在准备状态改变的时候调用这个函数。
　　一切准备好之后我们就要进行真正的发送请求了，发送请求是调用的xmlHttpRequest对象的send方法，这个方法里面当以post的形式发送请求，这里的方法的参数，就是我们请求的地址的参数，这个地址的参数是以键值对的形式传参的，如果是以get的形式请求时，我们可以把send方法的参数设置为null。，假如我们是以get的请求方式，发送代码即为了：xmlHttpRequest.send(null);，我们在来说说以post的请求方式请求时。xmlHttpRequest.send(null)，null可以传参数（即send（“v1="+v1））；并且在真正发送之前（xmlHttpRequest.send(null)）之前必须设置xmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");这一点一定要注意。
　　OK，请求发送出去了之后，我们下面来看一下我们怎么来接受请求返回的数据。根据HTTP协议我们应该知道，我们的一个请求应该分为四个步骤，也就是说一个请求有四个状态，他的状态即为xmlHttpRequest对象的readstate属性。我们来看一下这五个状态的具体内容：
从上边可以看出我们上边注册的回调函数将会被执行四次，但是我们其实就只在请求完成时执行我们回调函数的内容就OK，所以在回调函数里面我们可以进行一下判断
　　if (xmlHttpRequest.readyState == 4) { //请求完成}。
　　虽然我们判断了请求是否完成，但我们不知道这个请求是否成功，在我们http协议中，请求成功的状态码是200，所以我们如下判断一下状态码是否为200就可以了。
　　if (xmlHttpRequest.status == 200) {}
　　演示
　　　　见web项目demo-ajax