ajax调用 ( 基础整理 )
1.ajax就是前后端通信，即服务器、客户端数据交换；通过在后台与服务器进行少量数据交换，AJAX可以使网页异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行局部更新的
2.ajax = 异步JavaScript和xml(json)
3..ajax的技术核心是 XMLHttpRequest 对象；
4.ajax 请求过程：创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据；
一、第一种
//初始化XMLHttpRequest对象 function createXmlHttpRequest(){ var xmlHttp; try{ //Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e){ try{ //Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){} } } return xmlHttp; } //创建ajax对象的三步走战略 window.onload=function(){ //创建xhr对象 var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP'); //配置xhr对象,第一个参数是请求类型(下例以get请求为例)，第二个参数是请求路径，第三个参数是：是否是异步，默认值是true（异步） xhr.open('GET','URL',true); //发送请求数据 xhr.send(null); //通过监听xhr对象下的readystate来反应服务器处理请求的状态 xhr.onreadystatechange=function(){ if(xhr.readyState==4 && xhr.status==200){ //从xhr下的responseText属性中拿到服务器返回的值,然后再解析 console.log(xhr.responseText); //将接收到的数据转换成字节后再编码成UTF-8。request xhr.setCharacterEncoding("utf-8");//post } } }
readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
a)，0 代表未初始化。还没有调用 open 方法
b)，1代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
c)，2 代表已加载完毕。send 已被调用。请求已经开始
d)，3代表交互中。服务器正在发送响应
e)，4 代表完成。响应发送完毕
status 服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息，并且属于超文本传输协议中的一部分。
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )
二、ajax的封装
1.普通函数参数的封装
//函数参数如下：
//1.ajax的请求类型 type
//2.请求路径 url
//3.请求数据 data
//4.成功的回调函数 successFn
//5.失败的回调函数 errorFn
function ajaxFn(type,url,data,successFn,errorFn){ //创建xhr对象 var xhr=window.XMLHttpRequest()?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP'); //将传进来的请求类型转为统一大写或者小写，再进行判断什么类型的请求 type=type.toUpperCase(); if(type==' GET'){ //配置xhr对象 xhr.open('GET',url+'?'+data,true); xhr.send(null); }else if(type=='POST'){ xhr.open('POST',url,true); xhr.send(data); }else{ console.log('请求数据类型不匹配'); } //监听xhr对象的readyState的属性从而反应服务器的请求状态 xhr.onreadystatechange=function(){ if(xhr.readyState==4 && xhr.status ==200){ //当服务器出来数据完成并发送到了前端，则调用回调函数，就服务器获取的数据作为回调函数的参数 successFn(xhr.responseText); }else if(xhr.status==404){ errorFn('页面找不到！'); }else if(xhr.status == 500){ errorFn('服务器报错'); } } }
2.将对象作为参数，封装一个实现ajax的函数
//给函数传一个对象类型的参数，来实现ajax的封装
function ajax(obj){ //创建xhr对象 var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP'); //先将对象里面的type转为小写或大写，再进行判断是否是什么类型的请求，然后做出相应的判断 type=obj.type.toLowerCase(); if(type=='get'){ //配置xhr对象 xhr.open('get',obj.url+'?'+obj.data,true); xhr.send(null); }else if(type == 'post'){ xhr.open('post',obj.url,true); xhr.send(obj.data); }else{ console.log('请求参数有误，请重新配置！'); } //监听xhr对象的readyState的属性从而反应服务器的请求状态 xhr.onreadystatechange=function(){} }
}
三、使用jQuery进行ajax各种各样的方法：
1.query的load()方法：从服务器上获取静态数据文件
1.1、载入HTML文档：element.load(url,[data],[callback])
参数：url：字符串类型的url地址
参数：data：对象类型，发送给服务器的key/value数据
参数：callback:请求完成时的回调函数，无论成功与否
1.2、参数传递方式：根据data参数自动切换传递方式，如故没有data参数，则使用get传递，有参数则转换为post方式传递
1.3、回调函数中的参数：
第一个参数：请求返回的内容；
第二个参：请求状态（success，error，notmodified,timeout4种;
第三个参：xhr对象
$('#content').load('./data.html',function(data,status){
if(status == 'error'){
$('#content').text('你查找的页面无法找到');
}else if(status =='success'){
console.log(data);
}
})
2.jquery的get和post方法
$.get(url,[data],[callback],[type])方法
参数情况：
参数1.url参数，字符串类型的url地址
参数2.data参数，发至服务器的key\value值对，对象类型
参数3.callback参数：载入成功时的回调函数
参数4.type参数，返回数据的格式如：（xml\html\script\json\text等）
注意：返回的数据格式：HTML片段：通过html（）方法直接拼接进文档节点中；json文件：获取到json中key所对应的value，拼接进html文档中
//$.post()方法的用法参数与get一致 $.get('./data.xml',{ user:'张三', pass:'1233' },function(data){ console.log(data); })
3.jquery的ajax方法，即$.ajax(options)
$.ajax({ url:'', type:'get', //post data:'callback=?', //指定回调函数的属性 success:function(data){ console.log(data) },
error:function(err){} })
//请求方式为post时
//type:'post',
//data:{ name: "super", age: 20}, //请求参数
//也可以指定数据格式
//dataType:'jsonp', //指定数据格式，为jsonp跨域请求
//jsonp:'callback', //指定回调函数的属性名
4.getJSON()方法：专用于加载json文件：
$.getJSON( url(文件url外加请求参数) , [callback] )
参数callback：载入成功后的回调函数，data参数存放了请求到的数据
$.getJSON('http://10.0.156.213/data.php?cb=?',function(data){ ... })
四、json解析
XMLHttpRequest对成功返回的信息有两种处理方式： 1，responseText：将传回的信息当字符串使用； 2，responseXML：将传回的信息当XML文档使用，可以用DOM处 数据格式【3 种格式返回数据 XML JSON HTML】 //开始处理信息 var jaonResponse = xmlHttpReq.responseText; //处理 var provinceJsons = evel("(" + jaonResponse + ")"); //完成 for(var i = 0; i<provinceJsons.length; i++){ console.log("pid=" + provinceJsons[i].pid ) console.log("pname" + provinceJsons[i].pname) }
