JS原生Ajax操作(XMLHttpRequest)
GET请求
var xmld=new XMLHttpRequest();
xmld.open("GET","wan.php"+"?dd1=dong11&dd2=dong22"); //打开页面
xmld.setRequestHeader("dh","donghhhh");//设置请求头
xmld.send(null); //发送数据需要手动在url添加
xmld.onreadystatechange=function(){
if(xmld.readyState == 4){
//获取返回数据
alert(xmld.getResponseHeader("Server"));//获取响应头
alert(xmld.status+"--"+xmld.statusText);//得到如200：ok、404：Not Found 等等
alert(xmld.responseText); //得到字符串
//var xx=xmld.responseXML //得到HTML对象
}
};
POST请求
var xmld=new XMLHttpRequest();
xmld.open("POST","wan.php"); //打开页面
xmld.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置请求头
xmld.send("dd1=dong11&dd2=dfikij"); //发送数据
xmld.onreadystatechange=function(){
if(xmld.readyState == 4){
//获取返回数据
alert(xmld.getResponseHeader("Server"));//获取响应头
alert(xmld.status+"--"+xmld.statusText);//得到如200：ok、404：Not Found 等等
alert(xmld.responseText); //得到字符串
//var xx=xmld.responseXML //得到HTML对象
}
};
兼容性问题
if(XMLHttpRequest){
//系列操作
}else{
alert("浏览器不支持");
}
利用iframe模拟ajax
实现表单提交的返回结果在iframe中进行显示，实现主页面不刷新效果，也可以模拟上传文件，推荐使用，兼容性最好
<iframe id="ifd" name="dongff"></iframe>
<form action="wan.php" method="post" target="dongff">
<input type="text" name="dd1">
<input type="text" name="dd2">
<input type="submit" onClick="subd()">
</form>
//获取返回内容
<script src="jquery-3.3.1.min.js"></script>
<script>
//在点击提交按钮时给iframe添加加载完毕事件
function subd(){
//等待iframe内容加载完毕时进入
$("#ifd").on('load',function(){
//得到iframe的内容
var ifdtext=$("#ifd").contents().find("body").text();
alert(ifdtext);
});
}
</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("加载失败");
}
});
结合版：
$.ajax({
url:"wan.php",
type:"POST",
//headers:{"dongh":"dongssssss"}, //设置请求头，涉及跨域时不要进行设置
data:{"xx":123456,"user":"dddd"},
success:function (data) {
alert(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// 状态码
alert(XMLHttpRequest.status);
// 状态
alert(XMLHttpRequest.readyState);
// 错误信息
alert(textStatus);
}
});
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. |
解决方法如下，在访问的页面中添加响应头内容
<?php
// 指定允许其他域名访问
header('Access-Control-Allow-Origin:*');
// 响应类型
header('Access-Control-Allow-Methods:POST');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');
异步文件上传
自定义文件上传按钮（点击试试效果）：
东文件
利用页内标签定位浮动，实现等大的input标签浮于div标签之上，并将自身透明度设置为零，span的标签为显示的文字
<div style="height: 50px;width: 80px;background-color:aqua;text-align: center;line-height: 50px;position: relative">
<span>东文件</span>
<input type="file" id="infileid" style="height: 50px;width: 80px;position: absolute;opacity: 0; bottom: 0px;left: 0px;top: 0px;right: 0px">
</div>
原生ajax文件上传
function subd(){
var fileobjx=document.getElementById("infileid").files[0];//得到文件对象
//创建form表单对象
var formobjx=new FormData();
formobjx.append("namexx","dong111");
formobjx.append("dongfile",fileobjx);
var xmld=new XMLHttpRequest();
xmld.open("POST","wan.php"); //打开页面
xmld.send(formobjx); //发送form数据
xmld.onreadystatechange=function(){
if(xmld.readyState == 4){
alert(xmld.responseText); //得到字符串
}
};
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);
}
});
};