几种简单发送AJAX请求的方式

几种发送AJAX请求的方式

概念
Ajax = 异步 Javascript + XML , 是一种用于创建快速动态网页的技术。

优点
可以实现不重新加载整个网页的情况下,对网页的某部分进行更新。

浏览器是单线程的,如果要实现多任务,为了防止任务卡主或者等待情况,就需要异步概念。

同步和异步的区别
同步代码:代码是顺序执行的,根据代码定义顺序往下执行。
异步代码:代码的执行顺序不是按定义执行,往往同步的代码先执行,再执行异步代码。
XHR(XMLHttpRequest)对象
XMLHttpRequest(XHR)对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用

发送ajax请求
如果是get请求,参数直接拼接在url上发送。 post请求 参数放在请求体里面

post请求需要设置请求头,需要在open方法调用后再执行 xhr.setRequestHeader

get请求

通过 new 关键字 创建 xhr 实例 XMLHttpRequest

1.创建实例

const xhr = new XMLHttpRequest();

2.调用 xhr.open 方法设置请求数据的方式。

3.获取服务端响应的数据 xhr.onload

4.通过xhr.send方法发送数据
//2.xhr.open设置get请求的数据 xhr.open('请求方式','url')
xhr.open('get','http://127.0.0.1:3000/validate?userName=tom')
//3.1获取服务端响应的数据
xhr.onload = function(){
//3.2把json字符串转换为json对象
const res = JSON.parse(xhr.responseText);
console.log(res)
}
//4.xhr.send发送数据
xhr.send();
复制代码

post请求

//1.创建实例
const xhr = new XMLHttpRequest();
//2.xhr.open 设置请求数据
xhr.open('post','http://127.0.0.1:3000/login')
//3.设置请求头
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
//4.获取服务端响应的数据
xhr.onload = function(){
//4.1把json字符串转换为json对象
const res = JSON.parse(xhr.responseText);
if(res.code === 200){
console.log(res.msg)
}
//5.post发送数据,在send里面发送参数
xhr.send('userName=tom');

Jquery发送ajax请求

$.ajax({type,url,data,success})

type: 请求的方式,默认是一个get请求
url: 请求的地址
data: 请求的参数 ,接收的是一个对象{ key: value }
success: 成功回调,回调的第一个参数就是服务端返回的数据,他的格式是JSON对象
jq的get请求

//get请求

$.ajax({
type:'get', //请求方式
url:'http://127.0.0.1:3001/getJoke', //请求地址
data:{id:1}, //请求参数
success:function(res){
//如果获取数据成功,对数据进行处理
//res是服务器传递回来的数据,已经经过转换的JSON对象
if(res.code === 200){
console.log(res.data)
}

jq的post请求

//post请求
$.ajax({
type:'post', //请求方式
url:'http://127.0.0.1:3001/getJoke', //请求地址
data:{id:1}, //请求参数
success:function(res){
//如果获取数据成功,对数据进行处理
//res是服务器传递回来的数据,已经经过转换的JSON对象
if(res.code === 200){
console.log(res.data)
}

$.get发送请求

$.get(‘请求url’, ‘请求参数’, ‘请求回调函数’)

function getJoke() {
    $.get('http://127.0.0.1:3001/getJoke', { jokeId: 1 }, function(res) {
        $('#joke').html(res.data.content)
    })
}

$.post发送请求

$.post(‘请求URL’, ‘请求参数’, ‘回调函数’)

$.post('http://127.0.0.1:3001/toHuoxing', { content: '转换的内容' }, function(res) {
    console.log(res)
})

** . a j a x 和 .ajax 和 .ajax.ajax 和 . g e t 或 者 .get 或者 .get.post 请求到底怎么选择呢?

$.ajax
优势:可以设置更多的配置参数,更加灵活

劣势:写代码的时候比较麻烦

. g e t ∗ ∗ 或 ∗ ∗ .get**或** .get.post
注意点:参数传递顺序是固定

优势:写代码的时候比较方便

劣势:没法设置更多的参数,灵活性相对差一点。

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页