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获取所有响应头(检索资源(文件)的头信息)
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();
}
The getAllResponseHeaders() function returns the header information of a resource, like length, server-type, content-type, last-modified, etc.
Get header information
用ajax获取指定的响应头(检索资源(文件)的指定头信息)
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();
}
The getResponseHeader() function is used to return specific header information from a resource, like length, server-type, content-type, last-modified, etc.
Get "Last-Modified" information
加载XML文件(创建一个简单的XMLHttpRequest，从一个XML文件中返回数据。)
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();
}
Retrieve data from XML file
Status:
Status text:
Response:
Get XML data
当用户在文本框内键入字符时网页如何与Web服务器进行通信
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();
}
在输入框中尝试输入字母 a:
输入姓名:
提示信息:
回调函数的方式进行ajax请求(对ajax进行函数式的封装,方便复用)
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;
}
});
}
使用 AJAX 修改文本内容
修改内容
jquery封装的ajax
封装一:$(element).load(url,data,callback)方法
url:你要加载的url
data:你传送的参数
callback:回调函数,load()方法完成后会执行该函数
比如下面的示例1,将相应数据加载到html文档流中
demo_test.txt文件的内容是:
jQuery AJAX 是个非常棒的功能！
这是段落的一些文本。
ajax程序代码:
菜鸟教程(runoob.com)$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/try/ajax/demo_test.txt");
});
});
使用 jQuery AJAX 修改文本内容
获取外部内容
下面是将相应内容的p段落加载进去
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/try/ajax/demo_test.txt #p1");
});
});
使用 jQuery AJAX 修改文本
获取外部文本
你可以在加载完毕之后添加一个提示框
$(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响应状态吗的描述
});
});
});
使用 jQuery AJAX 修改该文本
获取外部内容
$.get(url,callback)
get方法传送参数在url里面拼接
url:get请求的地址
callback:回调函数
回调函数的第一个参数是响应体,第二个参数响应头
菜鸟教程(runoob.com)$(document).ready(function(){
$("button").click(function(){
$.get("/try/ajax/demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
});
发送一个 HTTP GET 请求并获取返回结果
$.post(url,data,callback)
url:你指定的url请求
data:你要post传送的数据
callback:回调函数
菜鸟教程(runoob.com)$(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);
});
});
});
发送一个 HTTP POST 请求页面并获取返回内容
$.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是否成功,最终都会执行的函数.
}
})
193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
