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获取所有响应头(检索资源（文件）的头信息)
The getAllResponseHeaders() function returns the header information of a resource, like length, server-type, content-type, last-modified, etc.
用ajax获取指定的响应头(检索资源（文件）的指定头信息)
The getResponseHeader() function is used to return specific header information from a resource, like length, server-type, content-type, last-modified, etc.
加载XML文件(创建一个简单的XMLHttpRequest，从一个XML文件中返回数据。)
Retrieve data from XML file
Status:
Status text:
Response:
当用户在文本框内键入字符时网页如何与Web服务器进行通信
在输入框中尝试输入字母 a:
提示信息:
回调函数的方式进行ajax请求(对ajax进行函数式的封装,方便复用)
使用 AJAX 修改文本内容
jquery封装的ajax
封装一:$(element).load(url,data,callback)方法
url:你要加载的url
data:你传送的参数
callback:回调函数,load()方法完成后会执行该函数
比如下面的示例1,将相应数据加载到html文档流中
demo_test.txt文件的内容是:
jQuery AJAX 是个非常棒的功能！
这是段落的一些文本。
ajax程序代码:
菜鸟教程(runoob.com)
使用 jQuery AJAX 修改文本内容
下面是将相应内容的p段落加载进去
使用 jQuery AJAX 修改文本
你可以在加载完毕之后添加一个提示框
使用 jQuery AJAX 修改该文本
$.get(url,callback)
get方法传送参数在url里面拼接
url:get请求的地址
callback:回调函数
回调函数的第一个参数是响应体,第二个参数响应头
菜鸟教程(runoob.com)
$.post(url,data,callback)
url:你指定的url请求
data:你要post传送的数据
callback:回调函数
菜鸟教程(runoob.com)
$.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是否成功,最终都会执行的函数.
}
})