JS原生Ajax操作(XMLHttpRequest)

GET请求

1 var xmld=new XMLHttpRequest(); 2 xmld.open("GET","wan.php"+"?dd1=dong11&dd2=dong22"); //打开页面 3 xmld.setRequestHeader("dh","donghhhh");//设置请求头 4 xmld.send(null); //发送数据需要手动在url添加 5 xmld.onreadystatechange=function(){  6 if(xmld.readyState == 4){ 7     //获取返回数据 8     alert(xmld.getResponseHeader("Server"));//获取响应头 9     alert(xmld.status+"--"+xmld.statusText);//得到如200：ok、404：Not Found 等等10     alert(xmld.responseText); //得到字符串11     //var xx=xmld.responseXML //得到HTML对象12         }13 };

POST请求

1 var xmld=new XMLHttpRequest(); 2 xmld.open("POST","wan.php"); //打开页面 3 xmld.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置请求头 4 xmld.send("dd1=dong11&dd2=dfikij"); //发送数据 5 xmld.onreadystatechange=function(){  6     if(xmld.readyState == 4){ 7     //获取返回数据 8     alert(xmld.getResponseHeader("Server"));//获取响应头 9     alert(xmld.status+"--"+xmld.statusText);//得到如200：ok、404：Not Found 等等10     alert(xmld.responseText); //得到字符串11     //var xx=xmld.responseXML //得到HTML对象12     }13 };

兼容性问题

if(XMLHttpRequest){    //系列操作}else{    alert("浏览器不支持");}

利用iframe模拟ajax

实现表单提交的返回结果在iframe中进行显示，实现主页面不刷新效果，也可以模拟上传文件，推荐使用，兼容性最好

1  2 
     
       3 
       4 
       5 
           6 
     
 7 //获取返回内容 8  9 

基于jquery的ajax

Get请求，参数（URL，数据，回调函数）

$.get("wan.php",{namex:"myname",passwd:"123"},function(datax){    $("p").text(datax);//datax为返回的数据});

Post请求，参数与get一致

$.post("wan.php",{namex:"myname",passwd:"123"},function(datax){    $("p").text(datax);//datax为返回的数据});

加载HTML碎片，返回结果会覆盖掉id为div1id标签的内容

$("#div1id").load("uu.html",function(a,b,c){if(b=="error"){    $("#div1id").text("加载失败");    }});

结合版：

1 $.ajax({ 2     url:"wan.php", 3     type:"POST", 4 //headers:{"dongh":"dongssssss"}, //设置请求头，涉及跨域时不要进行设置 5     data:{"xx":123456,"user":"dddd"}, 6     success:function (data) { 7         alert(data); 8     }, 9     error: function (XMLHttpRequest, textStatus, errorThrown) {10         // 状态码11         alert(XMLHttpRequest.status);12         // 状态13         alert(XMLHttpRequest.readyState);14         // 错误信息15         alert(textStatus);16     }17 18 });

Ajax的跨域请求

如果在浏览器控制台看到类似如下的错误，表示存在跨域请求数据，即两个网页不是在同一个服务器上

Access to XMLHttpRequest at 'http://193.112.87.66/add.php?namex=myname&passwd=123' from origin 'http://192.168.43.21:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方法如下，在访问的页面中添加响应头内容

1 
     

异步文件上传

自定义文件上传按钮（点击试试效果）：

东文件

利用页内标签定位浮动，实现等大的input标签浮于div标签之上，并将自身透明度设置为零，span的标签为显示的文字

1 
     
      2 
      东文件3 
      4 
     

原生ajax文件上传

1 function subd(){ 2        3     var fileobjx=document.getElementById("infileid").files[0];//得到文件对象 4     //创建form表单对象 5     var formobjx=new FormData(); 6     formobjx.append("namexx","dong111"); 7     formobjx.append("dongfile",fileobjx); 8      9     var xmld=new XMLHttpRequest();10     xmld.open("POST","wan.php"); //打开页面11     xmld.send(formobjx); //发送form数据12     xmld.onreadystatechange=function(){ 13     if(xmld.readyState == 4){14     alert(xmld.responseText); //得到字符串15     }16 };

Jquery的ajax文件上传

1 function subd(){ 2     var fileobjx=document.getElementById("infileid").files[0];//得到文件对象 3     //创建form表单对象 4     var formobjx=new FormData(); 5     formobjx.append("namexx","dong111"); 6     formobjx.append("dongfile",fileobjx); 7     $.ajax({ 8     url:"wan.php", 9     type:"POST",10     data:formobjx,11     processData: false,12     contentType: false,13     success:function (data) {14         alert(data);15     },16     error: function (XMLHttpRequest, textStatus, errorThrown) {17         // 错误信息18         alert(textStatus);19     }20 21    });22 23 };