一,Ajax= Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),
是一种用于快速创建网页的技术, 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
最大的有点:
- 在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
- 在使用时不需要额外安装插件, 但需要用户允许JavaScript在浏览器上执行。
二,Ajax的要点—XMLHttpRequest
在新版本的浏览器中已经封装好了该对象,在IE6, IE5 浏览器版本较低的浏览器中使用ActiveXObject对象进行传输数据;
XMLHttpRequest的属性:
- onreadystatechange属性:存有处理服务器相应的函数;
例:XMLHttpRequest对象.onreadystatechange=function(){
//处理逻辑代码
}
- readyState属性:存有服务器相应的状态信息;
例:0-请求初始化,再调用open()之前
- 请求已退出,在调用send()之前
- 请求已发送(send()方法已调用,但是当前的状态及http头未知)
- 请求处理中-(已接收部分数据,但响应及Http不全,且服务器还没有完成响应)
- 请求已完成(可以访问服务器,数据接收完毕)
例:向readystatechange函数添加if语句,来测试我们的响应是否完成
XMLHttpRequest对象.onreadystatechange=function(){
If(XMLHttpRequest对象.readyState==4){
//表示请求完成,可以从服务器的response中获取数据
}
}
- 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()方法;
- open()需要三个参数,参数一method:定义发送请求所使用的的方法(get还是post);参数二url:文件在服务器上的位置;参数三async:规定应当对请求进行异步地处理(传输方式,false为同步,true为异步。默认为true。如果是异步通信方式(true),客户机就不等待服务器的响应;如果是同步方式(false),客户机就要等到服务器返回消息后才去执行其他操作。)
以下情况使用post提交:
- 无法使用缓存文件(更新服务器上的文件或数据库;
- 向服务器发送大量数据
- 发送包含未知字符的用户输入时
- send():方法将请求发送至服务器
四,Ajax原理图解