ajax异步拼接页面,网页的异步请求（Ajax）

JS原生Ajax操作(XMLHttpRequest)

GET请求

1 var xmld=newXMLHttpRequest();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=newXMLHttpRequest();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

10 //在点击提交按钮时给iframe添加加载完毕事件

11 functionsubd(){12 //等待iframe内容加载完毕时进入

13 $("#ifd").on('load',function(){14 //得到iframe的内容

15 varifdtext=$("#ifd").contents().find("body").text();16 alert(ifdtext);17 });18 }19

基于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 <?php2 //指定允许其他域名访问

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

2 东文件

3

4