JS原生Ajax操作(XMLHttpRequest)

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

结合版：

 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; 80px;text-align: center;line-height: 50px;position: relative">
2 <span>东文件</span>
3 <input type="file" id="infileid" style="height: 50px; 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文件上传

function subd(){
    var fileobjx=document.getElementById("infileid").files[0];//得到文件对象
    //创建form表单对象
    var formobjx=new FormData();
    formobjx.append("namexx","dong111");
    formobjx.append("dongfile",fileobjx);
    $.ajax({
    url:"wan.php",
    type:"POST",
    data:formobjx,
    processData: false,
    contentType: false,
    success:function (data) {
        alert(data);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        // 错误信息
        alert(textStatus);
    }

   });

};

转自东小东博客园：

https://www.cnblogs.com/dongxiaodong/p/10422403.html