ajax精讲，让你从零开始

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 删除
head 回显
options 选项

响应码

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

XMLHTTPPRequst（xhr）

Ajax是一项综合的技术，全称Async Javascript And Xml(异步的javascript和xml)
核心是使用XMLHTTPPRequst与服务器异步交换数据，通过Javascript动态操作dom实现 页面无刷新修改视图

同步和异步

Javascript默认从上向下执行代码 上一行执行完毕 才加载下一行 称为同步，阻塞型
异步是非阻塞型执行代码，实现方式

1. 事件响应
2. 通过回调函数实现异步（setTimeout）
3. Promise

AJAX的优缺点

优点

1. 页面无刷新修改视图
2. 属于异步（不影响其他代码的执行）

缺点
对搜索引擎SEO不友好（内容通过Javascript加载，搜索引擎没有办法输入你的内容，就可能搜索不到）

get请求

	var xhr = new XMLHTTPPRequst();
	//打开方法
	xhr.open('get',./kongfu.txt)
	//发送
	xhr.send();
	//监听状态变化
	xhr.onreadystatechange = function(){
	//有0-4，5个状态 4代表服务器响应完成
		if(xhr.readyState==4){
			//status响应码
			if(xhr.status==200){
				var p = document.createElement('p');
				//服务器响应文本
				p.innerText = xhr.responseText;
				document.body.appendChild(p);
			}
		}
	}

post请求

	var xhr = new XMLHTTPPRequst();
	//打开方法
	xhr.open('post','https://520mg.com/ajax/echo.php')
	//告诉服务器发送的编码程序
	// 告诉服务器发送的编码形式
	xhr.send(`name=${uname.value}&age=${uage.value}`);
	//监听状态变化
	xhr.onreadystatechange = function(){
	//有0-4，5个状态 4代表服务器响应完成
		if(xhr.readyState==4){
			//status响应码
			if(xhr.status==200){
				var p = document.createElement('p');
				//服务器响应文本
				p.innerText = xhr.responseText;
				document.body.appendChild(p);
			}
		}
	}

ContentType

JQuer中的ajax

.load方法

语法

el.load(url)

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

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

$.get()方法

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

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

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

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

$.get("url")
.then(res=>{
  //res是服务器返回的内容
  //.then方法就是请求成功后获取内容的方法
})
.catch(xhr=>{
  //xhr就是jQuery封装的XMLHTTPRequest对象
  //.catch就是请求失败（通常是网络错误）响应方法
})

$.post()方法

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

$.post(url,data)
 .then(res=>res)
 .catch(xhr=>xhr)
 //url 请求的地址
 // data请求体（发给服务器的数据）

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

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

$.ajax()方法

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

jQ中的ajax方法是分装三层
第一层
$ajax()
第二层
$.get();
$.post();
第三层
$.getJSON() 加载json数据
$.getscript() 加载并执行js
语法结构

$.ajax({
	url,		//请求地址
	method,		//请求的方法（get,post,delete,put等）
	data,		//请求的数据
	dataType,	//返回数据列席 json jsonp text
	xhrFields: {withCredentials: true,//把本地url的cookie发给请求体，用来跨域}
	success:function(res){},  
	error:function(xhr){}	//等同与.then .catch
})
.then(res=>res)
.catch(xhr=>xhr)

案列

$.ajax({
	url:'https://520mg.com/member/index_login2.php',
	method:'POST',
	data:{  //发给服务器的数据
		fmdo:'login',
		dopost:'login',
		userid:uname,
		pwd:upass
	},
	dataType:'json',   //返回的数据 格式为json
	xhrFields:{
	withCredentials:true,  //把本地127.0.0.1的cookie发给520mg.com
	}
})
	.then(res=>{
		alert(res.msg);
		if(res.status==1){7
		location.href='./index.html'
	}
})
	.catch(xhr=>{
		console.log('请求失败')
	})
})

表格

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