几种简单发送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)
})

**$.ajax和$.ajax 和$.get或者$.post 请求到底怎么选择呢？

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

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

$.get\ast \ast 或\ast \ast$.post
注意点：参数传递顺序是固定

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

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