Ajax的知识总结
1:什么是Ajax
- Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
- 概念:Ajax不是某种编程语言,是能够创建快速动态网页和更新部分网页的技术
AJAX 是一种在无需重新加载整个网页的情况下,通过在后台与服务器进行少量数据交换,优化了浏览器与服务器之间的传输。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图等等
主要的用途:提升用户的体验
2:什么是同步异步
同步:指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去, 直到收到返回信息 才继续执行下去
异步:指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可 以 提高执行的效率
异步实现:
1、运用HTML与CSS来实现页面,表达信息
2、运用XMLHttpRequest和web服务器进行数据的异步交换
3、运用JavaScript操作DOM,实现动态局部刷新
3:创建XMLHttpRequest 对象
1: 什么是XMLHttpRequest对象
XMLHttpRequest对象用于在后台与服务器交换数据,是Ajax的关键
1): 创建XMLHttpRequest对象
不同浏览器使用不同的方法来创建XMLHttpRequest对象。
所有现代浏览器(IE7+,Firefox,Chrome,Safari 以及Opera)均内建XMLHttpRequest对象。
创建XMLHttpRequest对象的语法:
var xhr=new XMLHttpRequest();
老版本的Internet Explorer(IE5和IE6)使用ActiveXObject对象:
var xhr=new ActiveXObject(“Microsoft.XMLHTTP”);
为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :
// 创建一个作为 XMLHttpRequest 对象使用的 XMLHttp 变量
var xhr;
//测试 window.XMLHttpRequest 对象是否可用。
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
4:向服务器发送请求
先服务器发送请求,我们使用XMLHTTpRequest对象的open()和send()方法
1:使用格式:
xmlhttp.open("GET", "test1.txt", true);
xmlhttp.send();
2:参数解释:
3:用GET还是POST请求:
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据;
setRequestHeader()语法:
setRequestHeader(header,value):向请求添加HTTP头。
xhr.open("POST","/jQueryAjax/postPersonInfor",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(data);//data表单中需要提交的数据(字符串)
参数解释:
(1):异步-True或Flase?:
AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:
xhr.open("GET","/jQueryAjax/getPersonInfor",true);
当Async=true时,请规定在响处于onreadystatechange事件中的就绪状态时执行
函数;(onreadystatechange事件下面有详细讲到;)
当您使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:
对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。
通过 AJAX,JavaScript 无需等待服务器的响应,而是:
- 在等待服务器响应时执行其他脚本
- 当响应就绪后对响应进行处理
5:服务器响应
1:如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
responseText:获得字符串形式的响应数据。
document.getElementById("myDiv").innerHTML=xhr.resonseText;
responseXML:获得 XML 形式的响应数据。
var data = xhr.responseText;//获取xhr的返回值
参数解释:
6:onreadystatechange事件
1:onreadystatechange事件:
当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当readyState改变时,就会触发onreadystatechange事件。
readyState属性存有XMLHttpRequest的状态信息
下面是 XMLHttpRequest 对象的三个重要的属性:
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执 行的任务。
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var txt = xhr.responseText;
console.log(txt);
}
}
使用 Callback 函数
callback 函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 AJAX任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):
function myFunction() {
loadXMLDoc("ajax_info.txt", function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
});
}