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) } }