Ajax
- 一种不用刷新页面便可以与服务器通讯的方法
- 数据在客户端与服务器之间的独立传输,服务器不再返回整个页面
- 提升用户体验
1. 不用刷新页面便可以和服务器通讯的方法有很多:
---- Flash
----Java applet
----框架:如果使用了一组框架构造了一个网页,可以只是更新这个其中的一个框架
---- 隐藏的iframe
---- XMLHttpRequest :该对象是对JavaScript的一个扩展,可以使网页与服务器进行通信.是创建Ajax的应用的最佳选择.实际上通常把Ajax当做XMLHttpRequest的对象的代名词
2. 为什么要兼容IE5
- XMLHttpRequest 最早是在IE5中以ActiveX组件的形式出现的,不是W3C的标准,
function createXMLHTTPRequest() { ?????????????????????//1.创建XMLHttpRequest对象 ?????????????????????//这是XMLHttpReuquest对象无部使用中最复杂的一步 ?????????????????????//需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码 ?????????????????????var xmlHttpRequest; ??????????????????if (window.XMLHttpRequest) { ?????????????????????????//针对FireFox，Mozillar，Opera，Safari，IE7，IE8 ????????????????????????xmlHttpRequest = new XMLHttpRequest(); ?????????????????????????//针对某些特定版本的mozillar浏览器的BUG进行修正 ?????????????????????????if (xmlHttpRequest.overrideMimeType) { ?????????????????????????????xmlHttpRequest.overrideMimeType("text/xml"); ?????????????????????????} ?????????????????????} else if (window.ActiveXObject) { ?????????????????????????//针对IE6，IE5.5，IE5 ?????????????????????????//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中 ?????????????????????????//排在前面的版本较新 ?????????????????????????var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ]; ?????????????????????????for ( var i = 0; i < activexName.length; i++) { ?????????????????????????????try { ?????????????????????????????????//取出一个控件名进行创建，如果创建成功就终止循环 ?????????????????????????????????//如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建 ????????????????????????????????xmlHttpRequest = new ActiveXObject(activexName[i]); ??????????????????????????????if(xmlHttpRequest){ ?????????????????????????????????break; ?????????????????????????????} ??????????????????????????} catch (e) { ?????????????????????????????} ?????????????????????????} ?????????????????????} ?????????????????????return xmlHttpRequest; ??????????????} ???//这个是兼容性比较好的版本function getHTTPObject(){ ???var xmlHttp = null; ???if(window.XMLHttpRequest){ ???????xmlHttp = new XMLHttpRequest(); ???}else if(window.ActiveXObject){ ???????xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); ???} ???return xmlHttp;}//目前`比较简单的版本3. XMLHttpRequest的方法
abort() 停止当前请求
getAllRequestHeaders() 把HTTP请求的所有响应首部作为键/值返回
getResponseHeader("header") 返回指定首部的串值
open(‘method‘, ‘url‘ ) 建立服务器的连接调用
setRequestHeader("header", "value") 把指定首部设置为所提供的值,4.在设置首部之前必须先调用open()
4.XMLRequest 属性
onreadystatechange:
每个状态改变都会触发这个事件处理器,通常会调用一个JavaScript函数,请求到服务器中会产生不同状态,服务器触发
readyState
请求状态:
- 0 ====> 未初始化
- 1 ====> 正在加载
- 2 ====> 已经加载
- 3 ====> 交互中
- 4 ====> 完成
- responseText
服务器的响应,表示为一个串
- responseXML
服务器的响应表示为XML,这个对象可以解析为DOM对象
- status
服务器HTTP状态码 200===> ok 404===>not found
- statusText
HTTP状态码相对的文本
发送请求
setRequestHeader(header,value)
当浏览器向服务器请求页面的时候,会伴随这个请求发送一组首部信息,这些首部信息是一系列描述请求的元数据(metadata),首部信息用来声明请求是GET还是POST请求
Ajax请求中,发送首部的工作setRequestHeader
如果用Post请求向服务器发送数据,需要将"Content-type"的首部设置为"application/x-www-form-urlencoded",它会告诉服务器正在发送数据,并且数据已经符合URL编码
该方法必须是在open()之后才能调用
json解析
//从服务器获取返回的数据xmlHttp.onreadystatechange = function(){ ???if(xmlHttp.onreadyState == 4){ ???????if(xmlHttp.status == 200){ ???????????xmlHttp.responseText(); ???????????var text = xmlHttp.responseText; ??????????????var jsonText = evel("("+text+")"); ???????????????console.log("name:"+jsonText.name",age:"+jsonText.age); ???????}else{ ???????????console.log("false"); ???????} ???}} ??//服务器端数据{ ???"name":"lakerMonster", ????"age":100}关于Ajax的一些使用（一）
原文地址：https://www.cnblogs.com/lakemonster/p/9742696.html