AJAX基础知识总结

1、   是什么？

l  基本含义：

Ajax：AsynchronousJavaScript and XML,异步的JavaScript和XML。产生的主要目的是用于页面的局部刷新。Ajax是一系列技术的集合，例如在实现与服务器的异步通信时，需要用到XML、javascript、XMLHttpRequest等、使用这几种技术可以实现与服务器的异步通信。

l  何为异步？

简单的说，就是向服务器发送了请求代码接着往下走，不必等待服务器返回结果后代码再向下运行。每当用户向服务器端发送请求时，哪怕需要的只是更新一点点的局部的内容服务器端都会将一个整体的页面进行刷新，并重新生成代码，这样程序的性能肯定会降低的。而如果采用Ajax局部刷新技术，整体页面就不会随着用户的每次请求而整体变化，只会在局部的位置上有所改变，这样的实现方式减小了用户与服务器交互的信息量，会使程序的性能更高。

  传统方式：同步操作；Ajax方式：异步操作对比图：

            



l  AJAX优势

（1）改善表单验证方式，不需要打开新的页面，也不再需要将整个页面的数据进行提交。

（2）不需要刷新页面就可以改变页面的内容，减少用户等待时间。

（3）异步与服务器进行交互，在交互过程中用户无需等待，仍可以继续操作。（如上图所示）

l  强大的技术支撑

AJAX基于以下这些核心技术：XHTML、CSS、DOM、JavaScript、XML、XMLHttpRequest

2、   AJAX的应用

1）   建立XMLHttpRequest对象

XMLHttpRequest即可扩展超文本传输请求。它提供了对HTTP协议的完全访问，包括做出POST和HEAD请求以及普通的GET请求的能力。它还可以同步或异步返回Web服务器的相应，并且能有通过文本或者DOM文档的形式返回内容。

<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>functioncreateXMLHttpRequest() {
// 针对IE和其他浏览器建立这个对象写不同的代码
if(window.XMLHttpRequest)
//针对FireFox Opera IE7 IE8
xmlHttp = newXMLHttpRequest();
//针对某些特定版本的mozilla的bug修正
　　if(xmlHttp.overrideMimeType)
xmlHttp.overrideMimeType("text/xml");
}
}</strong></span>

2）   设置回调函数

常用方法：

Open():建立到服务器的新请求

Send():向服务器发送请求

Abort()：退出当前请求

readyState()：提供HTML的就绪状态

responseText()：服务器返回的请求响应文本

3）   使用open方法与服务器连接

4）   向服务器发送数据

5）   在回调函数针对不同的相应状态进行处理

代码实现：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong>　function sendRequest(url) {
　　 createXMLHttpRequest();
　　MLHttpReq.open("GET", url, true);//指定响应函数
　　 XMLHttpReq.onreadystatechange = handleResponse;

　　 XMLHttpReq.send(null); 　　 // 发送请求
　}</strong></span>

*需要注意的是：

1）不同浏览器下创建XMLHttpRequest对象的方式不同。

2）设置回调函数时，不要在函数名后面加括号。

3）open方法最多可以有五个参数（使用GET方式时，请求数据位于url链接中，后面的send方法的参数直接写null就可以。使用post方式时，open方法后面需要先调用setRequestHeader方法，来设置ContentType值，然后调用send方法，send的参数就是请求的数据）

4）回调函数中，最好将判断readState和status的两个if条件，分开来写。readyState的判断条件位于外层，status的位于内层。

5）使用XMLHttpRequest对象可以解决缓存问题、跨域访问问题、中文乱码问题。

3、   AJAX实例

1）检查用户名是否存在

2）检查用户名和密码是否正确

3、学习小结：

    简单的说，Ajax是用于实现在客户端脚本与服务器之间的数据交互过程。与JS、HTML、XML等核心技术交互使用，使编程更灵活。AJax技术很重要，需要在接下来的项目实践中不断学习和体会。多实践，多总结。