ajax请求操作步骤

最新推荐文章于 2022-03-08 08:01:29 发布

德云Millie

最新推荐文章于 2022-03-08 08:01:29 发布

阅读量221

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_45832989/article/details/115350148

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文详细介绍了Ajax技术，包括其定义、同步与异步、局部刷新特性，以及Ajax请求的操作步骤，如创建请求对象、建立连接、发送请求和处理结果。此外，还探讨了Ajax的几种发送请求的jQuery写法，并讲解了JSONP解决跨域问题的原理和应用。

摘要由CSDN通过智能技术生成

1.Ajax

1）什么是Ajax？

ajax(Asynchronous Javascript And Xml:异步的JavaScript和XML）,目的是让JavaScript发送http请求，
与后台通信，获取数据和信息。
Ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。在通信过程中不会影响后续的JS的执行，从而实现异步操作。

2）同步和异步

同步就是做完一件事（任务）后再做另一件事，后一件的执行依赖于前一件事件的完成。同步会影响到后面的JS代码的执行时间。
异步是指同时可以做多件事情（任务）。不会影响到后面JS代码的执行时间。

3）局部刷新和无刷新

Ajax可以实现局部刷新，也叫无刷新，就是整个页面不刷新，只是局部刷新而已。Ajax可以自己发送请求，不用通过浏览器地址栏，所以页面不会刷新。

2.ajax请求操作步骤：

1）创建请求对象

var xhr = new XMLHttpRequest();

2）建立请求连接

xhr.open(‘get’,url,true);// get/post：请求方式 true/false：true表示异步请求,false表同步操作 url：表示请求的路径

3）向后台发送请求

xhr.send();

注意：如果发送ajax请求，必须以http（服务器端）的方式启动文件，不能在本地直接打开。

4）前端对请求的结果进行处理

xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200){ // 如果请求成功
console.log(JSON.parse(xhr.responseText)); // responseTextr：获取请求的结果
}
};

3.用Ajax发送请求

写法1：

$.ajax({
type:‘get/post’, // 请求的方式，默认为get
url:‘请求的文件名或后台接口地址’, // 请求的地址
async:true/false , // 异步或同步，默认为true
data:{ // 上传到服务器端的数据
// 数据
},
dataType:‘json/jsonp/xml/text/javascript’, // 返回的数据类型或解决跨域(jsonp)
success:function(res){ // 成功回调的处理
// 成功回调的处理代码
},
error:function(err){ // 失败回调的处理
// 失败回调的处理代码
},
timeout:时间（毫秒）, // 请求超时时间
…
})

写法2：

$.ajax({
type:‘get/post’, // 请求的方式，默认为get
url:‘请求的文件名或后台接口地址’, // 请求的地址
async:true/false , // 异步或同步
data:{ // 上传到服务器端的数据
// 数据
},
dataType:‘json/jsonp/xml/text/javascript’, // 返回的数据类型或解决跨域(jsonp)

timeout:时间（毫秒）, // 请求超时时间
…
}).done(function(){ // 成功回调的处理
…
}).fail(function(){ // 失败回调的处理
…
})

写法3（推荐写法）：

        timeout:时间（毫秒）,                             // 请求超时时间
        ...
    }).then(function(){                                 // 成功回调的处理
        ...
    }).catch(function(){                                 // 失败回调的处理
        ...
    })

4.JSONP

1）同源策略

同源策略是由NetScape提出的一个著名的安全策略。
所谓的同源，指的是协议，域名，端口相同。浏览器处于安全方面的考虑，只允许本域名下的接口交互，不同源的客户端脚本，在没有明确授权的情况下，不能读写对方的资源。
http://127.0.0.1:8080 http为协议，127.0.0.1为域名，8080为端口

只要协议、域名和端口中任意一个不相同，就会出现跨域情况。