一、Ajax的概念
- Ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。
-
Ajax:Asynchronous JavaScript and XML(异步js和XML)
//XML的格式类型； <name>大力丸</name> <age>18</age> <qq>714206204</qq> <email>daliwan@126.com</email>
- ajax到底能干嘛：
js与后端进行数据交互的一种技术，通过请求协商好的接口，来获取到想要的数据
- 优点
传输数据时候会在本页面请求服务器，不用@R_529_404@面，从而减轻服务器压力。做到实时验证，减少用户返工率并且优化用户体验
二、Ajax数据交互流程
- 创建一个ajax对象；
var val=inputs[0].value; //下面这个是ajax对象； var ajax=new XMLHttpRequest;
- 填写请求地址；
//open是ajax对象上的一个方法； ajax.open("get","PHP/get.PHP?user="+val,true); //第一个参数决定是get还是post方式； //第二个参数是请求地址，并且把要提交的加上去； //第三个参数true代表异步，false代表同步；
- 发送请求；
ajax.send();
- 等待服务器响应；
ajax.onload=function(){
//响应好了就接受数据；
span.innerHTML=ajax.responseText;
}
- 接收数据；
三、返回的数据类型
ajax.responseText这是服务器返回的值：
1.肯定是字符串，有的看起来是对象，其实是json的形式；
2.用JSON的方法：JSON.parse(aja.responseText)转成真正的对象就可以用对象操作的方法去操作了；
四、XHR的兼容问题
//写一个兼容性的函数，实现跨浏览器； var ajax=null; if(window.XMLHttpRequest){ ajax=new XMLHttpRequest; }else{ ajax=new ActiveXObject(Microsoft.XMLHTTP) };
五、get和post的区别
-
get方式
-
post方式
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//创建对象；
var ajax=null;
if(window.XMLHttpRequest){
ajax=new XMLHttpRequest;
}else{
ajax=new ActiveXObject(Microsoft.XMLHTTP)
};
//填写请求地址；
ajax.open("post","PHP/post.PHP",true);
//发送请求，要在send前设置一下请求头；
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send("user="+val)
//下面的步骤和get方法是一样的；
六、同步与异步
- 同步
1、当
send()方法调用后会等待服务器返回信息，如果服务器一直没有响应，就会阻塞后面的代码，后面的代码就不会执行
2、后面的代码执行受前面代码的影响，前面的代码没跑通，后面的代码就不会执行
- 异步
七、onreadystatechange与onload
-
ajax.readStateajax的运行步骤（第一步捕捉不到） -
ajax.status(状态码) onreadStateChange
readstate的值发生变化就会触发这个事件；
onload
所有请求成功完成后触发，此时的
readstata的值为4
IE(6,7,8)不支持
现在这个方法逐渐取代onreadstatechange这个方法了
ajax.onreadstatechange=function(){
if(ajax.readstate==4){ //服务区响应完成了；
if(ajax.status==200){ //服务器正常；
//这里放要执行的代码；
}
}
}
八、封装ajax函数
-
对象中包包含以下几种数据，包含在一个对象里面：
- URL：发送请求的地址，需要把请求发给谁；
- method：发送请求的方法：get或者post；
- dataType：响应之后返回的数据类型：JSON,XML,STRING；
- data：请求的时候传的数据（它是一个对象需要处理格式）；
- succ：成功之后的callback；
- fail：失败后的callback；
function ajax(json){
//默认参数；
var settings={
url:"",method:"get",data:{},dataType:"json",succ:null,fail:null
}
//用户传的参数覆盖默认参数；
for (var attr in json){
settings[attr]=json[attr];
}
//把data拼成正确的格式；
var arr=[];
for (var attr in settings.data){
arr.push(attr+"="+settings.data[attr]);
}
settings.data=arr.join("&");
//声明变量；
var ajax=window.XMLHttpRequest?new XMLHttpRequest():ActiveXObject("Microsoft.XMLHTTP");
//设置请求方式；
//请求地址里面的new Date()方法，是为了设置不同的时间戳去解决缓存的问题；
if(settings.method.toLocalLowCase==="get"){
ajax.open("get",settings.url+"?"+settings.data+"&"+new Date().getTime(),true);
ajax.send();
}else{
ajax.open("post",settings.url,true);
//注意要设置一个请求头；
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send(settings.data);
}
//设置完成时间的兼容性；IE6下是没有ajax.onload方法的；
if(typeof ajax.onload==="undefined"){
ajax.onreadystatechange=ready;
}else{
ajax.onload=ready;
}
//封装一个ready()函数；
function ready(){
if(ajax.readystate==4){
if(ajax.status==200){
//用一个switch判断返回值得类型；
switch(settings.dataType.toLocalLowCase()){
case "string" :
settings.succ(ajax.responseText);
break;
case "json" :
//把responsetext转成json格式；
setting.succ(JSON.parse(ajax.responseText));
break;
case "xml" :
settings.succ(ajax.responseXml);
break;
}
}else{
settings.fail(ajax.status);
}
}
}
}
九、ajax上传
- 上传只能用 post 的方法，后台要处理中文相关的问题；
-
ajax.upload.onprogress 上传的进度事件；就是上传的时候要做的事情；
通过这个可以做出来一个上传的进度条；
用H5中的<progress></progress>这个API; -
- FormData 用来创建与表单格式相同的数据，它是XHR的二级定义，是一个二进制的数据；低版本的浏览器不支持；
**我自己对于FormData的理解：
FormDate可以new出来一个实例，这个实例可以继承它身上的append方法；这个操作放在ajax.open和ajax.send之间**
var formdata=new FormData();
//下面通过循环把选中的文件里面的额东西添加到这个对象身上；
for(var i=0;i<inputs[0].files.length;i++){
//inputs[0]指的是一个type="file"的表单控件；
formdata.append("file",inputs[0].files[i]);
}
//这时候formdata就可以被发送给服务器了，前面加上一个请求头；
十、跨域的问题
- 概念：
两个不同域名下的数据进行交互。Ajax之所以不能跨域其实是因为XMLHttpRequest受到同源策略的限制，只能让它访问同源下的数据，不能访问不同源下的数据;
- 同源策略：
每个网站只能读取同一来源的数据，这里的同一来源指的是主机名(域名)、协议(http/https)和端口号的组合。在没明确授权的情况下，不能读写对方的资源，它是浏览器最核心也最基本的安全功能；
只要有一个不一样就跨域；
-
- 在标准浏览器下XMLHttpRequest配合后端设置一个请求权限，在PHP里写上 header('Access-Control-Allow-Origin:*');
- 服务器代理，缺点是后端开发的成本大；
- iframe、flash、postMessage、WebSocket；
十一、jsonp
-
jsonp的概念（json+padding）
带src属性的<script><img><iframe><link>等标签是不需要遵守同源策略的，但是通过src加载的资源，浏览器限制了javascript的权限，能读不能写;这就是jsonp能实现跨域的原因；
-
jsonp中的回调函数
注意callback是要设置成全局的，要不就放在操作的前面；
- 封装一个jsonp
function jsonp(obj){
var settings={
url:'',//地址
data:{},//要发送的数据
callBack:'callback',//url里存储回调函数名字的变量
fnName:'jsonp_'+new Date().getTime(),//回调函数的名字
succ:function(){} //请求成功的回调函数
};
for(var attr in obj){
settings[attr]=obj[attr];
}
//创建一个script标签
var script=document.createElement("script");
script.className='sc';
settings.data[settings.callBack]=settings.fnName;
var head=document.getElementsByTagName('head')[0];
//把要传的数据拼起来
var arr=[]; //['wd=sds','cb=jQuery1']
for(var attr in settings.data){
arr.push(attr+'='+settings.data[attr]);
}
settings.data=arr.join('&');
script.src=settings.url+'?'+settings.data;
head.appendChild(script);
//把回调函数挂载到window身上
window[settings.fnName]=function(data){
//当调用这个函数的时候，先把页面中所有的已经请求过的script删掉
var scripts=head.getElementsByTagName('script');
for(var i=0;i<scripts.length;i++){
if(scripts[i].className=='sc'){
head.removeChild(scripts[i]);
}
}
settings.succ(data);
};
} 原文链接：https://www.f2er.com/ajax/160690.html