一篇文章解决Ajax

Ajax如何工作？

1.     网页中发生一个事件（如页面加载、按钮点击）
2.     由JavaScript创建XMLHttpRequest对象 
3.     XMLHttpRequest对象向Web服务器发送请求
4.     服务器出了该请求
5.     服务器将响应返回给网页
6.     由JS读取响应
7.     由JS执行正确的动作

Ajax的核心是XMLHttpRequest对象

创建XMLHttpRequest对象：

variable = new XMLHttpRequest()

跨域访问：处于安全原因，现代浏览器不允许跨域访问，这意味着尝试加载的网页与XML文件必须处于相同服务器上。

XMLHttpRequest对象方法：

• open(method,url,async,user,psw) ：规定请求
• method：请求类型GET或POST
• url：文件位置
• async：true（异步）或false（同步）
• user：可选的用户名称
• psw：可选的密码
• send() ：将请求发送给服务器，用于GET请求
• send()：将请求发送给服务器，用于POST请求

XMLHttpRequest对象属性：

onreadystatechange ：定义当readyState属性发生变化时被调用的函数

readyState ：保存XMLHttpRequest状态：

• 0：请求未初始化
• 1：服务器连接已建立
• 2：请求已收到
• 3：正在处理请求
• 4：请求已完成且响应已就绪

status ：返回请求的状态号

向服务器发送请求

选择GET还是POST？

GET比POST更简单更快，可用于大多数情况下。不过，请在以下情况始终使用POST：

• 缓存文件不是选项（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST无大小限制）
• 发送用户输入（可包含未知字符），POST比GET更加强大更安全

异步请求：open()方法的async参数设置为true

通过异步发送，JS不必等待服务器响应，而可以：

• 在等待服务器响应时执行其他脚本
• 当响应就绪时处理响应

    onreadystatechange属性定义当请求接收到应答时所执行的函数

        http.onreadystatechange = function(){

            if(this.readyState == 4 && this.status == 200){

                ...

            }

        }

同步请求：open()方法的async参数设置为false

由于代码将等待服务器完成所以不需要onreadystatechange函数

    

服务器响应

onreadystatechange属性：

• readyState属性存留XMLHttpRequest的状态
• status属性和statusText属性存留XMLHttpRequest对象的状态
• 当readyState为4，status为200时，响应就绪

    

使用回调函数

如果网站中有多个Ajax任务，那么应该创建一个执行XMLHttpRequest对象的函数，以及一个供每个Ajax任务的回调函数，该函数应当包含URL以及当响应就绪时调用的函数。

    

服务器响应属性

• responseText ：获取字符串形式的响应数据，以JS字符串形式返回服务器响应。
• responseXML ：获取XML数据格式的响应数据，以XML DOM对象返回服务器响应，使用此属性可以把响应解析为XML DOM对象。

服务器响应方法

• getResponseHeader() -从服务器返回特定的头部信息，返回来自服务器响应的特定头部信息。
• getAllResponseHeaders() -从服务器返回所有头部信息，返回所有来自服务器响应的头部信息（可带参数）。