ajax底层使用XMLHttpRequest
# 把下面代码放到 script标签里面 或者新建js文件
var xhr = new XMLHttpRequest()
xhr.open("GET","http://www.baidu.com",true) # 第三个参数是默认为true的可不写,指设置为异步模式执行ajax请求,设为false为同步模式
xhr.send() # 注意send方法没有返回值,因为发送请求到返回响应的时间不确定,不能让ajax阻塞在这里,所以ajax设计的时候send没有返回值
# ajax的设计是使用事件的形式来设计的
xhr.onreadystatechange = function(){ # 这个事件是在状态改变时触发,而不是响应的时候触发.ajax有5个状态01234
console.log(this.readyState) # 查看ajax的状态,其中01不会打印,这是因为01是在注册事件的时候就触发了,打印是在绑定事件之后的事情,来不及打印.
if (this.readyState !=4) return # 不是最后状态4,退出
console.log(xhr.responseText) # 最终状态,获取数据
}
上面事件的高级写法:
xhr.addEventListener("readystatechange", function(){
if (this.readyState != 4) return
console.log(this.responseText)
})
F12 检查小技巧
当你选择network功能时,all代表查看网络的所有请求
xhr代表查看ajax请求
用ajax获取所有响应头(检索资源（文件）的头信息)
<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('p1').innerHTML=xmlhttp.getAllResponseHeaders();
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p id="p1">The getAllResponseHeaders() function returns the header information of a resource, like length, server-type, content-type, last-modified, etc.</p>
<button onclick="loadXMLDoc('/try/ajax/ajax_info.txt')">Get header information</button>
</body>
</html>
用ajax获取指定的响应头(检索资源（文件）的指定头信息)
<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('p1').innerHTML="Last modified: " + xmlhttp.getResponseHeader('Last-Modified'); //Content_-Length
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p id="p1">The getResponseHeader() function is used to return specific header information from a resource, like length, server-type, content-type, last-modified, etc.</p>
<button onclick="loadXMLDoc('/try/ajax/ajax_info.txt')">Get "Last-Modified" information</button>
</body>
</html>
加载XML文件(创建一个简单的XMLHttpRequest，从一个XML文件中返回数据。)
<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('A1').innerHTML=xmlhttp.status;
document.getElementById('A2').innerHTML=xmlhttp.statusText;
document.getElementById('A3').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>Retrieve data from XML file</h2>
<p><b>Status:</b><span id="A1"></span></p>
<p><b>Status text:</b><span id="A2"></span></p>
<p><b>Response:</b><span id="A3"></span></p>
<button onclick="loadXMLDoc('note.xml')">Get XML data</button>
</body>
</html>
当用户在文本框内键入字符时网页如何与Web服务器进行通信
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>在输入框中尝试输入字母 a:</h3>
<form action="">
输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>提示信息: <span id="txtHint"></span></p>
</body>
</html>
回调函数的方式进行ajax请求(对ajax进行函数式的封装,方便复用)
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari 代码
xmlhttp=new XMLHttpRequest();
}
else
{// IE6, IE5 代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div>
<button type="button" onclick="myFunction()">修改内容</button>
</body>
</html>
jquery封装的ajax
封装一:$(element).load(url,data,callback)方法
url:你要加载的url
data:你传送的参数
callback:回调函数,load()方法完成后会执行该函数
比如下面的示例1,将相应数据加载到html文档流中
demo_test.txt文件的内容是:
<h2>jQuery AJAX 是个非常棒的功能！</h2>
<p id="p1">这是段落的一些文本。</p>
ajax程序代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/try/ajax/demo_test.txt");
});
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取外部内容</button>
</body>
</html>
下面是将相应内容的p段落加载进去
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/try/ajax/demo_test.txt #p1");
});
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本</h2></div>
<button>获取外部文本</button>
</body>
</html>
你可以在加载完毕之后添加一个提示框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/try/ajax/demo_test.txt",function(response_text,response_status,response_header){
//response_test 是相应体,response_status是ajax响应的成功与否,成功success,失败error
//response_header是响应头,包括响应状态码比如200,响应的数据类型Content-Type,响应的长度Conten-Length
if(response_status=="success")
alert("外部内容加载成功!");
if(response_status=="error")
alert("Error: "+response_header.status+": "+response_header.statusText);
//status响应状态码, statusTxt响应状态吗的描述
});
});
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改该文本</h2></div>
<button>获取外部内容</button>
</body>
</html>
$.get(url,callback)
get方法传送参数在url里面拼接
url:get请求的地址
callback:回调函数
回调函数的第一个参数是响应体,第二个参数响应头
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("/try/ajax/demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP GET 请求并获取返回结果</button>
</body>
</html>
$.post(url,data,callback)
url:你指定的url请求
data:你要post传送的数据
callback:回调函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP POST 请求页面并获取返回内容</button>
</body>
</html>
$.ajax({
url:"", // 请求的地址 ,默认是当前页面
type:"get",//请求的方式
data:{id:1, name:"hha"}, //post 发送的数据
dataType:"json", //设置响应体返回的格式 ,和data属性没有关系,设置的是响应的格式
contentType:"application/x-www-form-urlencoded", //设置发送数据的格式,默认为"application/x-www-form-urlencoded",form表单数据
success:function(res){
console.log(res)
},error:function(xhr){
alert("错误提示： " + xhr.status + " " + xhr.statusText); //xhr.status状态码,xhr.statusText状态描述
},
complete:function(res){
//无论ajax是否成功,最终都会执行的函数.
}
})
