ajax.案例入门

最新推荐文章于 2023-04-12 23:37:53 发布

kong@react

最新推荐文章于 2023-04-12 23:37:53 发布

阅读量108

点赞数 1

文章标签： ajax javascript ecmascript

本文链接：https://blog.csdn.net/kkddqq1121/article/details/125196520

版权

HTTP

http一种无状态的网络协议

http的请求过程

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

请求头的组成

**请求行（请求报头）
-GET 请求方法
-/ 请求的资源地址
-/HTTP、1.1协议

请求头信息
Accept 浏览器接受的类型
Cookie 会话信息
User-

响应头的组成

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

请求方法

参考链接：【传送门】（https://baike.baidu.com/item/RESTful/4406165）
get 获取
post 添加
put 修改
delete 删除
trace 回显
head 只发送头信息
options 选项

响应码

【响应码大全】（https://blog.csdn.net/weixin_43984157/artlcle/detalls/120021418）
1.XX 消息
2xx 成功 200响应成功
3xx 重定向 307临时重定向
4xx 客户端错误 404报错
5xx 服务器错误 500服务器错误

XMLHTTPRequst(xhr)

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

同步与异步

JavaScript默认是从上向下执行代码，上一行执行完毕，下开始执行下一行，称为同步，柱塞试的

异步是非柱塞执行代码，实现方式：
1.事件响应
2.通过回调函数实现异步（setTimeout）
3.promise

ajax优缺点

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

get请求

var xhr = new XMLttpRequest();
xhr.open('get','./kongfu.txt')
xhr.send();
xhr.onreadystatechange = function(){
   if(xhr.readyStata == 4){
      if(xhr.status==200){
         console.log(xhr.responseText)
        }
     }
}

post请求

var xhr = new XMLttpRequest();
xhr.open('post','http://520mg.com/ajax/echo.php')
xhr.setRequestHeader('Content-Type','application/x-www-for-urlencoded')
xhr.send('name=mumu&age=18');
xhr.onreadystatechange = function(){
   if(xhr.readyStata == 4){
      if(xhr.status==200){
         console.log(xhr.responseText)
         }
     }
}

JQuery中的ajax

get请求

post请求

JQuery中的ajax

.load 方法

语法
…js
el.load(url)
…
解释
把url的内容通过ajax加载到el内部
**示例 **
…js
$(‘.container’).load('./kongfu.text);
…

$.get（）方法

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

$.get(url)
.then（res=>res）
.cath（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（）加载josn数据的
$.getScript（）加载并执行js

语法

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

**案列**
```js
$.ajax（{
            url：'https://520mg.com/member/index_login2.php',
            method：'POST',
            data：{dopost：'exit'},   //退出的参数
            dataType："json"        //返回的数据格式是json
            xhrFieds：{withCredentials：true} //跨域
}）
.then（res=>{
         alert（res）
}）
.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	加载完成的回电函数关闭加载提示	-