搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发

AJAX技术学习

健伟学习平台 2020-09-16

AJAX技术学习

水里的游鱼是缄默沉静的,陆地上的兽类是喧哗的,空中的飞鸟是喧哗着的。人类却兼有海洋的缄默沉静、陆地的喧哗与天空的音乐。      

                     ——泰戈尔






AJAX技术

AJAX技术学习

AJAX全称为Asynchronous Javascript And XML,即异步的JSXML;通过AJAX可以在浏览器中向服务端发送异步请求,最大的优势就是:无刷新获取数据。

AJAX技术学习





AJAX技术学习
AJAX的特点
AJAX技术学习



1




ajax

AJAX的优点与缺点


优点:

1、可以无需刷新页面而与服务器端进行通信。

2、允许你根据用户事件来更新部分页面内容。


缺点:

1、没有浏览历史,不能回退

2、存在跨域问题(同源策略)

3、SEO不友好


AJAX技术学习





AJAX技术学习

HTTP请求报文与响应报文结构

AJAX技术学习



2




ajax

请求报文与响应报文

请求报文:

重点是格式与参数

     POST   /s?ie=utf-8  HTTP/1.1

     Host: atguigu.com

        Cookie: name=guigu

        Content-type: application/x-www-form-urlencoded

        User-Agent: chrome 83

空行

     username=admin&password=admin


响应报文:

     HTTP/1.1   200   OK

     Content-Type: text/html;charset=utf-8

        Content-length: 2048

        Content-encoding: gzip

空行

     <html>

            <head></head>

            <body>

                <h5>尚硅谷</h5>

            </body>

        </html>


AJAX技术学习




AJAX技术学习

AJAX中的GETPOST请求

AJAX技术学习



3




AJAX

GET&POST&请求头设置

GET请求

//创建ajax对象

Const xhr = new XMLHttpRequest();

//初始化,设置请求方法和url

Xhr.open(GET,http://127.0.0.1/server?a=100&b=200&c=300);

//发送请求

Xhr.send();

//时间绑定,处理服务端返回结果

Xhr.onreadystatechange=function(){

//判断服务端返回了所有的结果

If(xhr.readState==4){

//判断响应状态码

If(xhr.status>=200 && xhr.status <300){

Console,log(xhr.response);

}

}

}


POST请求

//创建ajax对象

Const xhr = new XMLHttpRequest();

//初始化,设置请求方法和url

Xhr.open(GET,http://127.0.0.1/server);

//发送请求

Xhr.send(a=3&b=4);

//时间绑定,处理服务端返回结果

Xhr.onreadystatechange=function(){

//判断服务端返回了所有的结果

If(xhr.readState==4){

//判断响应状态码

If(xhr.status>=200 && xhr.status <300){

Console,log(xhr.response);

}

}

}



请求头设置

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

 xhr.setRequestHeader("name1","ddd");


AJAX技术学习




AJAX技术学习

自动重启工具nodemon

AJAX技术学习



3




AJAX

nodemon

安装npm install -g nodemon

使用nodemon [your node app]


AJAX技术学习






AJAX技术学习

AJAX中的一系列问题

AJAX技术学习



3




AJAX

iE缓存&超时&网络异常&取消请求&重复发送

Ie中ajax缓存问题解决

初始化对象时路径后面加上时间戳

xhr.open("POST","http://localhost:8000/ie?t="+Date.now());


Ajax请求超时(ontimeout)与网络异常(onerror

xhr.timeout=2000;

 //超时回调

xhr.ontimeout=function(){

alert("你的网络超时了")

}

//网络异常

xhr.onerror=function(){

alert("你断网了")

}


Ajax取消请求

xhr.abort();//执行之后就会取消


Ajax请求重复发送问题

<script>

    //获取所有button

    const btns = document.querySelectorAll("button");


    let x = null;

    let isSending=false;//判断是否重复点击

    btns[0].onclick=function(){

       //判断是否重新请求,是就取消掉

       if(isSending) x.abort();

        x = new XMLHttpRequest();

        //初始化

        isSending = true;

        x.open("GET","http://localhost:8000/server");

        //发送请求

        x.send();

        x.onreadystatechange=function(){

            if(x.readyState === 4){ //判断是否成功发送请求,如果成功就将状态改为false

                isSending = false;

            }

          }

    }


    //取消发送的请求

    btns[1].onclick=function(){

        x.abort();//执行之后就会取消

    }

</script>


AJAX技术学习






AJAX技术学习

Jqurey发送AJAX请求

AJAX技术学习



3




AJAX

GET&POST&通用方式

$.get(http://127.0.0.1/server,{a:100,b:200},function(){

Console.log(data)

},json);


POST请求

$.post(http://127.0.0.1/server,{a:100,b:200},function(){

Console.log(data)

},json);


Jquery通用发送请求方式

$.ajax({

//url

Url:http://127.0.0.1/server,

//参数

Data:{a:100,b:200},

//请求类型

Type:GET/POST,

//响应体结果

dataType:json,

//成功的回调

Sucess:function(data){

Console.log(data);

}

//超时时间

Timeout:2000,

//失败的回调

Error:function(){

Console.log(错误)

},

//头信息

Headers:{

C:200,

D:400

}

})


AJAX技术学习






AJAX技术学习

Axios发送AJAX请求

AJAX技术学习



3




AJAX

GET&POST&函数发送

GET请求

Axios.get(/axios-server,{

//url参数

Params:{

Id:200,

Vip:7

},

//请求头信息

Headers:{

Name:mmm,

Age:20

}

}).then(val =>{

Console.log(val)

})


POST请求

Axios.post(/axios-server,{

A:100,

B:200

},{

//url参数

Params:{

Id:200,

Vip:7

},

//请求头信息

Headers:{

Name:mmm,

Age:20

}

})



Axios函数发送ajax请求

Axios({

//请求方法

Method:POST,

//url

Url:/axios-server,

//url参数

Params:{

Vip:10,

Leavel:30

},

//头信息

Headers:{

A:100,

B:200

},

//请求体参数

Data:{

Username:admin,

Password:admin

}

}).then(response =>{

Console.log(response)

})


AJAX技术学习






AJAX技术学习

Fetch函数发送AJAX请求

AJAX技术学习



3




AJAX

fetch函数

GET&POST请求

fetch(http://127.0.0.1/fetch-server?vip=10,{

//请求方法

Method:”GET/POST,

//请求头

Headers:{

Name:ad,

},

//请求体

Body:username=admin&password=admin

}).then(response=>{

//如果返回结果是字符串

Return response.text();

//如果返回结果是json格式

Return response.json()

}).then(response=>{

Console.log(response)

})


AJAX技术学习






AJAX技术学习

AJAX中的跨域问题解决

AJAX技术学习



3




AJAX

原生JsonP&Cors

原生jsonp(只支持get请求)

//创建script标签

Const script = document.createElement(script);

//设置标签的src属性

Script.src=http://127.0.0.1:200/srrver;

//将script插入文档中

Document.body.appendChild(script);

服务端返回函数体(js代码)才行,字符串不行


Cors

//服务端设置一个响应头,设置允许跨域

 response.setHeader("Access-Control-Allow-Origin","*");

//服务端设置请求头 所有请求头都可以通过

 response.setHeader("Access-Control-Allow-Headers","*");


AJAX技术学习


有些书也许现在你读不懂,但你一定要去读它。时间会告诉你经典存在的意义。

——寄语








扫码关注我们
公众号:健伟学习平台
更多前端知识推荐给你




版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《AJAX技术学习》的版权归原作者「健伟学习平台」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注健伟学习平台微信公众号

健伟学习平台微信公众号:jw77pt

健伟学习平台

手机扫描上方二维码即可关注健伟学习平台微信公众号

健伟学习平台最新文章

精品公众号随机推荐