ajax基本原理与案例
一、什么是Ajax
AJAX即“Asynchronous Javascript And XML”（ 异步 JavaScript和XML），
AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
它是一套综合了多项技术的浏览器端网页开发技术。
这些技术包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.
二、Ajax原理
运用HTML和css来实现页面,表达信息
通过浏览器的XmlHttpRequest(Ajax引擎)对象
来向服务器(发送异步请求)并(接收服务器)的响应数据，
然后用javascript来操作DOM，实现动态局部刷新。
三、Ajax实现过程
😆
通常是
第一步:Javascript监听浏览器网页事件(点击,提交,更改等)
第二步:由javascript创建Ajax引擎对象
第三步:通过Ajax引擎对象发出请求
第四步:Ajax引擎等待并且接受服务器的响应内容
第五步:javascript再从 *Ajax引擎对象* 中获取响应内容,
并且通过dom改变网页界面显示效果1.创建Ajax引擎对象
就是XMLHtttpRequest对象,所有现代浏览器均支持XMLHttpRequest对象
(IE5 和 IE6 使用 ActiveXObject)它同时也是一个Javascript对象.
Ajax引擎(XMLHttpRequest)兼容处理
var xhr = null;
if (window.XMLHttpRequest) {
//所有现代浏览器(IE7+.Firefox.Chrome.Safari以及opera)
xhr = new XMLHttpRequest;
}else{
//老版本的Internet Explorer使用ActiveX对象
xhr = new ActiveXObject("Microsoft.XMLHttp");
}2.配置请求对象的信息
xhr.open('GET/POST','url地址',['是否异步']);
注意：如果使用post请求,就一定要设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gb2312");3.发送请求
xhr.send([post请求参数字符串]);
发送请求分为两种情况:
1.监控用户的事件(onclick,onchange等),通过ajax发送请求
2.监控浏览器的事件(onload),通过ajax发送请求.
4.监听Ajax引擎对象的改变(是否正确做出了响应)
xmlHttpRequest.onreadystatechange = function(){
if (xmlHttpRequest.readyState== 4 && xmlHttpRequest==200) {
//xmlHttpRequest.responseText
//xmlHttpRequest.responseText
}
}4.1 - 详解onreadystatechange
onreadystatechange属性是一个方法,
监控到响应内容的返回,
根据响应内容使用javascript改变当前页面的部分html代码,从而达到不刷新改变局部html代码.
当Ajax引擎的状态发生改变时都会执行onreadystatechange属性对应的方法
>>其他方法：
abort:取消当前请求
getAllResponseHeaders:获取响应的所有http头
getResponseHeader:从响应信息中获取指定的http头
open(方式get/post，url地址，同步异步):
创建一个新的http请求，打开请求，并指定此请求的方法、URL以及验证信息(用户名/密码)
send():发送请求到http服务器并接收回应
setRequestHeader:单独指定请求的某个http头，header()设置http头协议信息
>>其他属性：
onreadystatechange:指定当readyState属性改变时的事件处理句柄。
readyState:返回当前请求的状态，ajax行进过程中不同状态
responseBody:将回应信息正文以unsigned byte数组形式返回.
responseStream:以Ado Stream对象的形式返回响应信息。
responseText:将响应信息作为字符串返回.只读
responseXML:将响应信息格式化为Xml Document对象并返回，只读
status:返回当前请求的http状态码. 200 ok 304 缓存；
404 not found; 403 没有权限 501 服务器级别错误
statusText:返回当前请求的响应行状态文本， ok not found forbidden4.2 - 详解Ajax引擎的状态属性 readyState(0 1 2 3 4)
*0.请求未初始化
*1.服务器连接已建立
*2.请求已接收
*3.请求处理中
*4.请求已完成,并且响应已就绪当Ajax引擎的状态属性为readyState为4时,说明服务器的响应已经发送给Ajax请求了.
但是响应的状态吗为200时:说明响应的内容是正确的,这时才会根据相应内容对当前页面的html处理
总结：
基本示例：
var xhr = new XMLHttpRequest;
xhr.open('GET/POST','url地址',['是否异步']);
xhr.send([post请求参数字符串]);
xhr.onreadystatechange = function(){
if (xmlHttpRequest.readyState== 4 && xmlHttpRequest==200) {
//做一些事情
//xhr.responseText
}
}四、为什么使用Ajax？
优点:
使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。
这使得Web应用程序更为迅捷地响应用户动作，并避免了在网络上发送那些没有改变的html代码信息。
1.减轻服务器负担，按需要获得数据。
2.无刷新更新页面，减少用户的实际和心理的等待时间。
3.更好的用户体验。
4.减轻宽带的负担。
5.主流浏览器支持缺点:
1.AJAX的程序必须测试针对各个浏览器的兼容性。
2.AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；需提醒用户
3.对搜索引擎支持不好。