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
get 获取
post 添加
put 修改
delete 删除
trace 回显
head 只发送头信息
options 选型

响应码

响应码大全

1. xx 消息
2. xx 成功 200响应成功
3. xx 重定向 307临时重定向
4. xx 客户端错误 404错误
5. xx 服务器错误 500服务器错误

XMLHttpRequest (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",'./kongfu.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("get",'http://520mg.com/ajax/echo.php')
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send('name=mumu&age=18');
xhr.onreadystatechange = function(){
	if(xhr.readyState == 4){
		if(xhr.status == 200){
			console.log(xhr.responseText)
		}
	}
}

Content-Type 内容类型传送门

JQuery中的ajax

.load方法

语法

el.load(url)

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

$(".container").load("./kongfu.txt");

$.get()方法

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

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

.then的前面一行没有分号结尾

示例
向服务器请求一条笑话信息

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

$.post()方法

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

$.post(url,data)
.then(res=>res)
.catch(xhr=>xhr)

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

示例

//$.post("http://520mg.com/ajax/echo.php",'name=木木，age=18')
$.post("http://520mg.com/ajax/echo.php",{name:"木木"，age:18})
.then(res=>{
	console.log(res)
})
.catch(xhr=>{
	console.error(xhr)
})

$.ajax()方法

$.ajax()方法是jQuery的底层方法，可以传入定义的参数最多，更加灵活
jQ中的ajax方法是分3层封装的

• 第一层 $.ajax()
• 第二层
  $.get();
  $.post();
• 第三层
  el.load() 加载
  $.getJSON() 加载json数据的
  $.getScript() 加载并执行js

语法

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

案例

$.ajax({
	url:"https://520mg.com/member/index_login2.php",
	method:"POST",
	data:{dopost:"exit"},				//退出的参数
	dataType:"json",					//返回的数据格式是json
	xhrFields: {withCredentials: true}  //跨域
	})
	.then(res=>{
	alert(res.msg);
	})
	.catch(err=>console.error(err))

$.ajax的参数

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