网页的异步请求(Ajax)

前端开发 作者: 2024-08-20 03:25:02
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表单提交的返回结果在iframe中进行显示,实现主页面不刷新效果,也可以模
 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 };
 2 xmld.open("POST","wan.php");  3 xmld.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 4 xmld.send("dd1=dong11&dd2=dfikij"); 发送数据
 6         }
13 };
if(XMLHttpRequest){
    系列操作
}else{
    alert("浏览器不支持");
}
<iframe id="ifd" name="dongff"></iframe>
 2 form action="wan.php" method="post" target 3 input type="text"="dd1" 4 ="dd2" 5 ="submit" onClick="subd()">    
</form 7 //获取返回内容
 8 script src="jquery-3.3.1.min.js"script 9 10 //在点击提交按钮时给iframe添加加载完毕事件    
11 function subd(){
12     等待iframe内容加载完毕时进入
13     $("#ifd).on('load,(){
14         得到iframe的内容
15         var ifdtext=$().contents().find(body).text();
16         alert(ifdtext);
17     });
18 }
19 >
$.get("wan.php",{namex:"myname",passwd:"123"},function(datax){
    $("p").text(datax);//datax为返回的数据
});
$.post("wan.php",function(datax){
    $("p").text(datax);//datax为返回的数据
});
$("#div1id").load("uu.html",(a,b,c){
if(b=="error"){
    $("#div1id").text("加载失败");
    }
});
$.ajax({
 2     url:"wan.php" 3     type:"POST"headers:{"dongh":"dongssssss"},//设置请求头,涉及跨域时不要进行设置
 5     data:{"xx":123456,"user":"dddd"},1)"> 6     success: (data) {
        alert(data);
    },1)"> 9     error:  (XMLHttpRequest,textStatus,errorThrown) {
10          状态码
11         alert(XMLHttpRequest.status);
12          状态
13         alert(XMLHttpRequest.readyState);
14          错误信息
15         alert(textStatus);
16 17 
18 });
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');
东文件
1 div style="height: 50px;width: 80px;background-color:aqua;text-align: center;line-height: 50px;position: relative"span>东文件="file" id="infileid" style="height: 50px;width: 80px;position: absolute;opacity: 0; bottom: 0px;left: 0px;top: 0px;right: 0px"div>
 2       
 3     var fileobjx=document.getElementById("infileid").files[0];得到文件对象
 4     创建form表单对象
 5     var formobjx= FormData();
 6     formobjx.append("namexx","dong111" 7     formobjx.append("dongfile" 8     
 9     10     xmld.open("POST",1)">11     xmld.send(formobjx); 发送form数据
12     xmld.onreadystatechange=13     14     alert(xmld.responseText); 16 };
 2      5     formobjx.append("namexx",1)"> 6     formobjx.append("dongfile"    $.ajax({
 8     url:"wan.php" 9     type:"POST"10     data:formobjx,1)">11     processData: false12     contentType: 13     success:14 16     error: 17         18 20 
21    });
22 
23 };
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65295.html