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 选项

响应码

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

XMLHTTPRequst(xhr)

ajax是一项综合技术，全程Async Javascrip And Xml 异步的javascript和XML
核心是使用XMLHttpReqeust与服务器异步交换数据，通过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请求

Content-Type 内容类型

url编码 application/x-www-form-urlencoded
json application/json
text text/html

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=>{
//  .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.log(xhr)
})

$.ajax()方法

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

jQ中的ajax方法是分3层封装的

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

语法

$.ajax({
url,         // 请求的地址
method,      // 请求的方法get,post,delete,put
data,        // 返回数据列席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);
	if(res.status==1){
	   location.href='index.html'
    }
})
.catch(xhr=>console.log('网络请求失败'))

$.ajax的参数

参数名	解释
url	请求的地址
method	请求的方法
datatype	返回的数据类型
data	请求的数据
xhrFields	携带请求头信息
success	成功的回调函数
error	失败回调函数
beforeSend	发送前的回调函数
conplete	加载完成回调函数