ajax简介
ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
异步传输是面向字符的传输,它的单位是字符;而同步传输是面向比特的传输,它的单位是桢,它传输的时候要求接受方和发送方的时钟是保持一致的。
什么是ajax?
- ajax=异步JavaScript和XML。
- ajax是一种用于创建快速动态网页的技术。
AJAX XHR
XHR 创建对象
-
XMLHttpRequest是ajax的基础
-
XMLHttpRequest对象
-
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
-
创建XMLHttpRequest对象
-
创建 XMLHttpRequest 对象的语法:
variable=new XMLHttpRequest();
-
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
variable=new ActiveXObject("Microsoft.XMLHTTP");
实例
//创建xhr对象
var xhr = null
//浏览器兼容判断
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP")
} else {
alert("你的浏览器不支持ajax,请升级你的浏览器")
return
}
XHR请求
XMLHttpRequest对象用于和服务器交换数据
-
向服务器发送请求
xmlhttp.open("GET","test1.txt",true); xmlhttp.send();
-
方法open
-
方法:open(method,url,async)
-
描述:规定请求的类型、URL 以及是否异步处理请求。
-
method:请求的类型;GET 或 POST
-
url:文件在服务器上的位置
-
async:true(异步)或 false(同步)
-
方法send
-
方法: send(string)
-
描述:将请求发送到服务器。
-
string:仅用于 POST 请求
-
get请求
xmlhttp.open("GET","demo_get.asp",true); xmlhttp.send();
-
post请求
xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates");
-
方法
-
setRequestHeader(header,value)
-
描述
-
向请求添加 HTTP 头。 header: 规定头的名称。 value: 规定头的值
XHR相应
服务器相应
-
属性:responseText。描述:获得字符串形式的响应数据。
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
-
属性:responseXML。描述:获得 XML 形式的响应数据。
xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; } document.getElementById("myDiv").innerHTML=txt;
XHR readyState
AJAX - onreadystatechange 事件
-
onreadystatechange事件
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
-
使用Callback函数
function myFunction() { loadXMLDoc("ajax_info.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); }
实例
// method String xhr放请求的方式
// url String xhr发送请求的接口地址
// data Object xhr需要发送到服务器的参数
// callback function xhr请求完成之后的回调函数
function xhr(method, url, data, callback) { // xhr("GET","/add?type=news")
var xhr = null
var params = format(data) // params = "name=张三&age=26"
//兼容判断
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else if (window.ActiveXObject) { //兼容<IE7以下版本浏览器
xhr = new ActiveXObject("Microsoft.XMLHTTP")
} else {
return null
}
//判断是否为get,如果是,将发送的参数拼接到url地址
if (method.toLowerCase() === "get") {
url = url.indexOf("?") > -1 ? url + "&" + params : url + "?" + params
params = null
}
//初始化
xhr.open(method, url, true) //如果是get请求 url= "/testGet?name=李四&age=26"
//监听
xhr.onreadystatechange = function() {
//定义ajax请求完成之后的一些操作
if (xhr.readyState === 4 && xhr.status === 200) {
callback(xhr.responseText, xhr)
}
}
//如果是post
if (method.toLowerCase() === "post") {
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
}
//发送xhr请求
xhr.send(params)
function format(obj) {
var str = ""
for (var key in obj) {
str += key + "=" + obj[key] + "&"
}
return str.substring(0, str.length - 1)
}
}