网页的异步请求(Ajax)

JS原生Ajax操做(XMLHttpRequest)

GET请求php

 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请求html

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

兼容性问题jquery

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

利用iframe模拟ajax

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

 1 <iframe id="ifd" name="dongff"></iframe>
 2 <form action="wan.php" method="post" target="dongff">
 3 <input type="text" name="dd1">
 4 <input type="text" name="dd2">
 5 <input type="submit" onClick="subd()">    
 6 </form>
 7 //获取返回内容  8 <script src="jquery-3.3.1.min.js"></script>
 9 <script>
10 //在点击提交按钮时给iframe添加加载完毕事件 
11 function subd(){ 12     //等待iframe内容加载完毕时进入
13  $("#ifd").on('load',function(){ 14         //获得iframe的内容
15         var ifdtext=$("#ifd").contents().find("body").text(); 16  alert(ifdtext); 17  }); 18 } 19 </script>

基于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("加载失败"); } });

结合版:app

 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 <?php 2 // 指定容许其余域名访问
3 header('Access-Control-Allow-Origin:*'); 4 // 响应类型
5 header('Access-Control-Allow-Methods:POST'); 6 // 响应头设置
7 header('Access-Control-Allow-Headers:x-requested-with,content-type');

异步文件上传

自定义文件上传按钮(点击试试效果):

东文件

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

1 <div style="height: 50px;width: 80px;background-color:aqua;text-align: center;line-height: 50px;position: relative">
2 <span>东文件</span>
3 <input type="file" id="infileid" style="height: 50px;width: 80px;position: absolute;opacity: 0; bottom: 0px;left: 0px;top: 0px;right: 0px">
4 </div>

原生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 };

原文出处:https://www.cnblogs.com/dongxiaodong/p/10422403.html

本站公众号
   欢迎关注本站公众号,获取更多信息