$.ajax({
url:'',//请求文件路径
type:'',//请求方式GET POST
data:{},//要发给服务器的数据参数
dataType:'',//希望接口返回的数据格式json,string等等
success:function(){
// 请求成功的回调
},
error:function(){
// 请求失败的回调
}
})
一个ajax的请求可以形象的比喻为一次打电话的过程:
//1 拿出手机 创建XMLHttpRequest对象
//2 拨号 连接到服务器
//3 说话 发送请求
//4 等待对方回应 服务器响应请求
//1 拿出手机 创建XMLHttpRequest对象
if(window.XMLHttpRequest){
var OAjax = new XMLHttpRequest()
}else{
// 兼容ie6及以下写法
var OAjax = new ActiveXObject("Misrcsoft.XMLHTTP")
}
//2 拨号 连接到服务器
OAjax.open('GET','a.html?t="new Date().getTime()"','true');//请求方式,请求路径,t为了消除
缓存,是否异步
//3 说话 发送请求
OAjax.send();
//4 等待对方回应 服务器响应请求
//4 等待对方回应 服务器响应请求
OAjax.onreadystatechange = function(){
//OAjax.readyState,监听浏览器和服务器之间的交互到哪一步了
// 0->未初始化,还没有调用open方法
// 1->载入,已调用send()方法,正在发送请求
// 2->载入完成,send()方法已完成,已收到全部响应内容
// 3->解析,解析响应的内容
// 4->完成,相应内容解析完成,可以在客户端调用
if(OAjax.readyState == 4){
if(OAjax.status == 200){
// 请求a.html成功,responseText为服务器响应的内容
console.log('ajax请求成功',OAjax.responseText);
}else{
// 状态不为200
console.log('ajax请求失败');
}
}
}
原生ajax
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的
某部分进行更新。
ajax原生版,兼容所有浏览器:
function loadXMLDoc(url){
xmlhttp=null;
if (window.XMLHttpRequest){
// code for Firefox, Opera, IE7, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject){
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null){
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);//method:请求的类型;GET 或 POST。
async:true(异步)或 false(同步)
xmlhttp.send(null);//string:仅用于 POST 请求
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//添加请求头。
}
else{
alert("Your browser does not support XMLHTTP.");
}
}
function state_Change(){
if (xmlhttp.readyState==4){
// 4 = "loaded"
if (xmlhttp.status==200){
// 200 = "OK"
document.getElementById('T1').innerHTML=xmlhttp.responseText;
}
else{
alert("Problem retrieving data:" + xmlhttp.statusText);
}
}
}
1.responseText 获得字符串形式的响应数据。
2.responseXML 获得 XML 形式的响应数据。
3.onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
4.readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
5.status
200: "OK"
404: 未找到页面
简化ajax模版,便于工作中调用:
function loadAjax(url,box){
// code for IE7+, Firefox, Chrome, Opera, Safari || code for IE6, IE5
var req = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
req.open("GET",url,true); //post 中文路径会报错。
req.send();
req.onreadystatechange = function(){
if(req.readyState==4&&req.status==200){
box.innerHTML=req.responseText;
}
}
}
注:没有readyState和status错误提示。
原生ajax请求
(1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象.
(2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方法、`URL`及验证信息.
(3)设置响应`HTTP`请求状态变化的函数.
(4)发送`HTTP`请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
var XMLHttp = new XMLHttpRequest ()
XMLHttp.open = ("请求的方法(get\post)" ,"URL" , "async(ture异步/false同步)")
xmlHttp.send()
xmlhttp.onreadystatechange=function () {//接收到服务端响应时触发
if(xmlhttp.readyState==4&&xmlhttp.status==200){
}
xmlhttp.readyState一共有5中请求状态,从0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
xmlhttp.status
200: "OK"
300 这些状态码用来重定向
401 当前请求需要用户验证
403 (禁止) 服务器拒绝请求。
404 (未找到) 服务器找不到请求的网页。
408 (请求超时) 服务器等候请求时发生超时。
500 (服务器内部错误) 服务器遇到错误,无法完成请求。
原生ajax
原生ajax的工作流程是怎么样的?
要发一个ajax请求首先要创建XMLHttp对象
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() :
new ActiveXObject("Microsoft.XMLHTTP")
其中,new ActiveXObject("Microsoft.XMLHTTP")是为了兼容ie5/6的对象
然后调用对象的open方法来规定请求的类型、URL 以及是否异步处理请求
xmlhttp.open("GET","localhost:3000/package.json",true)
如果你async字段写的true,也就是发起的是异步请求,那么要写onreadystatechange事件来监听请求的
状态,每当 readyState 属性改变时,就会调用该函数
onreadystatechange函数实例,主要就是根据readyState和status的判断来处理返回的responseText
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
最后调用send将请求发给服务器
如果是get请求,参数是在url后面直接添加的
如果想自定义header的字段,可以在发送之前用setRequestHeader(header,value)向请求添加http头