ajax基础教程

http

http是一种无状态的网络协议

http的请求过程

1.建立TCP网络连接（与服务器连通）
2.客户端发送请求头+请求体
3.服务器应答响应头+响应体
4.关闭TCP连接
5.客户端（浏览器）渲染内容

请求头的组成

一、请求行（请求报头）
-GET 请求方法
-/ 请求的资源地址

-/HTTP/1.1 协议
请求头信息
Accept 浏览器接受的类型
Cookie 会话信息
User-Agent

响应头的组成

响应行
HTTP/1.1 协议
200 响应码
ok 状态
响应头信息
content-Type 返回的数据类型
空行
响应体（返回的网页）

请求的方法

参看连接restFul：restFul
get 获取
post 添加
put 修改
delete 删除
trace 回显
head 只发送头信息
options 选项

响应码

响应码大全 传送门
1xx 消息
2xx 成功
3xx 重定向
4xx 客户端错误 404错误
5xx 服务器错误 500服务器错误

XMLHTTPRequst(xhr)

ajax是一项综合技术，全程Async Javascript And Xml 异步的javascript和XML核心是使用XMLHttpRequest与
服务器异步交换数据，通过js动态操作dom实现页面无刷新更新视图

同步异步

javascript 默认是从上向下执行代码，上一行执行完毕，开始执行下一行，成为同步，阻塞式的
异步是非阻塞执行代码，实现方式：
1.事件响应
2.通过回调函数实现异步（setTimeout）
3.Promise

ajax优缺点

优点
最大优点：无刷新更新页面视图
异步（不影响别的代码执行）
缺点
对搜索引擎SEO不友好（内容是通过javascript加载的，百度没有办法收录你的内容，百度搜索对应关键字，搜索不到你的网页）

get请求

var xhr =new XMLHttpRequest();
xhr.open("get",'./konggu.txt')
xhr.send();
xhr.onreadystatechange =function(){
if(xhr.readyState==4){
if(xhr.status==200){
console.log(xhr.responseText)
}
}
}
//open 打开方法
//send 发送
//onreadystatechange监听状态变化
// readyState 有0-4,5个状态 ，4代表的是服务器响应完成
// status 响应码 200代表请求成功
// responseText 服务器响应的文本

post请求

var xhr =new XMLHttpRequest();
xhr.open("post",'http://520mg.com/ajax/echo.php')
xhr.setRequestHeader('Content-Type','application/x-www/from-urlencoded')
xhr.send('name=xiaowang&&age=18');
xhr.onreadystatechange =function(){
if(xhr.readyState==4){
if(xhr.status==200){
console.log(xhr.responseText)
}
}
}
//open 打开方法
//send 发送
//onreadystatechange监听状态变化
// readyState 有0-4,5个状态 ，4代表的是服务器响应完成
// status 响应码 200代表请求成功
// responseText 服务器响应的文本

JQuery中的ajax

load方法

语法

el.load(url)

解释
把ul的内容通过ajax加载到el内部
示例

$(".container").load(".kong.txt")

$.get（）方法

通过git请求方式 获取内容
语法

$.get(url)
.then(res=>res)
.catch(xh=>xh)

.then的前面一行没有分号结尾
示例
向服务器请求一条笑话信息

$.get("http://520mg.com/mi/list.php?page=1")
.then(res=>{
//res 就是服务返回的内容
//.then方法就是请求成功后获取内容的方法
})
.catch(xh=>{
//.catch就是请求失败（通常是网络错误）响应方法
//xh就是jquery 封装的XMLHttpRequest对象
})

$.post（）方法

以post方法向服务器发起请求
语法

$.post(url,data)
.then(res=>res)
.catch(xh=>xh)
//url 请求的地址
//data 请求体（发给服务器数）
//.then 成功响应方法
//.catch 网络失败响应方法
//res服务器返回的数据 response响应的简写，是个形参起任何名字都行

示例

//$.post("http://520mg.com/mi/list.php",'name=小王age=18')
$.post("http://520mg.com/mi/list.php",{name=小王age=18})
.then(res=>{
console.log(res)
})
.catch(xh=>{
consloe.error(xh)
})

$.ajax（）方法

$.ajax()方法是jQuery的底层方法，可以传入定义的参数最多，更加灵活
jQ中的ajax方法是分三层封装的
-第一层
$.ajax()
-第二层
$.get()
$.post();
-第三层
el.load()加载
$.get JSON（）加载json数据的
$.getScript()加载并执行js

语法

$.ajax({
url ， //请求的地址
method, //请求的方法
data, //请求的数据
dataType, //返回数据列表json，jsonp，text
xhrFields：{withCredentials：true},//用来跨域
success：function（res）{},//成功回调函数res服务器返回的数据，等同于.then
error:function(xh){},//网络失败的回调，等同于catch

})
.then(res=>res)
.catch(xh=>xh)

案例

	$.ajax({
					url:"https://520mg.com/member/index_login2.php",
					method:"POST",
					data:{  
					dopost:"exit"
					},
					dataType:"json",//返回的数据格式是json
					xhrFields: {
						withCredentials: true,//把本地cookie发送给520mg.com
					}
				})
				.then(res=>{
					// 弹出服务器返回的信息
					alert(res.msg);
				})
				.catch(xh=>console.log("网络请求失败"))	
			})	

参数名	解释	示例
url	请求的地址	-
method	请求的方法	get ,post,put,delete
data	请求的数据	{name:“mm”,age:20}
dataType	返回的数据	xml,text,json,jsonp
xhFields	携带请求头信息 （用来跨域）	withCredentials: true
success	成功的回调函数
error	失败回调函数
beforeSend	发送钱的回调函数显示加载提示
complete	加载完成回调函数关闭加载提示