Ajax原理分析

一,Ajax= Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）,

是一种用于快速创建网页的技术, 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

最大的有点:

1. 在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
2. 在使用时不需要额外安装插件, 但需要用户允许JavaScript在浏览器上执行。

二,Ajax的要点—XMLHttpRequest

在新版本的浏览器中已经封装好了该对象,在IE6, IE5 浏览器版本较低的浏览器中使用ActiveXObject对象进行传输数据;

XMLHttpRequest的属性:

1. onreadystatechange属性:存有处理服务器相应的函数;

例:XMLHttpRequest对象.onreadystatechange=function(){

//处理逻辑代码

}

1. readyState属性:存有服务器相应的状态信息;

例:0-请求初始化,再调用open()之前

1. 请求已退出,在调用send()之前
2. 请求已发送(send()方法已调用,但是当前的状态及http头未知)
3. 请求处理中-(已接收部分数据,但响应及Http不全,且服务器还没有完成响应)
4. 请求已完成(可以访问服务器,数据接收完毕)

例:向readystatechange函数添加if语句,来测试我们的响应是否完成

XMLHttpRequest对象.onreadystatechange=function(){

If(XMLHttpRequest对象.readyState==4){

//表示请求完成,可以从服务器的response中获取数据

}

}

1. responseText属性:可以通过该属性取回由服务器返回的数据。用于接收字符串型

responseXML属性: 如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性;

<form name="myForm">

用户: <input type="text" name="username" />

时间: <input type="text" name="time" />

</form>

例:使用该属性获取表单中time的内容

document.myForm.time.value= XMLHttpRequest对象.responseText;

三,Ajax—请求服务器;

要想把请求发送到服务器,需要使用open()和send()方法;

1. open()需要三个参数,参数一method:定义发送请求所使用的的方法(get还是post);参数二url:文件在服务器上的位置;参数三async:规定应当对请求进行异步地处理(传输方式，false为同步，true为异步。默认为true。如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作。)

以下情况使用post提交:

1. 无法使用缓存文件(更新服务器上的文件或数据库;
2. 向服务器发送大量数据
3. 发送包含未知字符的用户输入时

1. send():方法将请求发送至服务器

四,Ajax原理图解