Ajax 概述

什么是Ajax

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML，可以是jSon 纯文本text)；

AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

Ajax 运行原理

Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。

Ajax 常见的应用场景

场景1.搜索框提示文字下拉列表

当我们在百度中输入一个“传”字后，会马上出现一个下拉列表！列表中显示的是包含“传”字的10个关键字；

其实这里就使用了AJAX技术！当文件框发生了输入变化时，浏览器会使用AJAX技术向服务器发送一个请求，查询包含“传”字的前10个关键字，然后服务器会把查询到的结果响应给浏览器，最后浏览器把这10个关键字显示在下拉列表中；

整个过程中页面没有刷新，只是刷新页面中的局部位置而已！

当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为zhangSan的用户是否存在，最终服务器返回true表示名为zhangSan的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”；

整个过程中页面没有刷新，只是局部刷新了；

在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；

场景2. 用Ajax进行数据验证

在填写表单内容时，需要保证数据的唯一性（例如新用户注册填写的用户名），因此必须对用户输入的内容进行数据验证；

数据验证通常有两种方式：

一种是直接填写，然后提交表单，这种方式需要将这个页面提交到服务器端进行验证，整个过程不仅时间长而且造成了服务器不必要的负担；

第二种方式是改进了的验证过程，用户可以通过点击相应的验证按钮，打开新窗口查看验证结果，但是这样需要新开一个浏览器窗口或者对话框，还需要专门编写验证的页面，比较耗费系统资源；

而使用Ajax技术，可以由XMLHttpRequest对象发出验证请求，根据返回的HTTP响应判断验证是否成功，整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器，快速而又不加重服务器负担；

场景3.注册时候的用户名的查重

当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来；

1.整个过程中页面没有刷新，只是刷新页面中的局部位置而已！

2.当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为lemontree7777777的用户是否存在，最终服务器返回true表示名为lemontree7777777的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”；

1.整个过程中页面没有刷新，只是局部刷新了；

2.在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；

AJAX的优缺点

优点：

1.AJAX使用Javascript技术向服务器发送异步请求；

2.AJAX无须刷新整个页面；

3.部，所以AJAX性能高；

缺点：

1.AJAX并不适合所有场景，很多时候还是要使用同步交互；

2.AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；

3.因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；

Ajax 编程基本步骤分析

第一步：基于dom事件创建XHR对象(XMLHttpRequest对象)

第二步：注册XHR对象状态监听，通过回调函数(callback)处理状态信息。

第三步：创建与服务端的连接

第四步：发送异步请求实现与服务端的通讯

第五步：通过回调（callback）函数，获得响应结果并进行数据更新.(非阻塞)

代码：

function doAjaxGet(url,params,callback){
//1.创建XmlHttpRequest对象
var xhr=new XMLHttpRequest();
//2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程(例如连接是否建立，请求是否在处理，响应是否已产生)
xhr.onreadystatechange=function(){//callback(回调函数)
//基于xhr对象获取的通讯状态，对响应数据进行处理
if(xhr.readyState4&&xhr.status200){//500表示服务端出错了
//服务端响应的结果会传递给XHR对象，我们可以借助responseText获取响应结果
callback(xhr.responseText);
}
}
//3.创建与服务端的连接
xhr.open(“GET”,url+"?"+params,true);//true表示异步
//4.发送请求
xhr.send(null); //Get请求，send方法不传内容
//5.对响应结果进行处理(在回调函数中处理)。
}