带你玩转Ajax

最新推荐文章于 2025-05-01 20:40:11 发布

MX_YANG_

最新推荐文章于 2025-05-01 20:40:11 发布

阅读量136

点赞数 3

文章标签： ajax jquery javascript

本文链接：https://blog.youkuaiyun.com/MX_YANG_/article/details/120778142

版权

jQuery中的Ajax

浏览器中提供的XMLHttpRequest用法比较复杂，所以jQuery对XMLHttpRequest进行了封装，提供了一系列Ajax相关的函数，极大的降低了Ajax的使用难度。

jQuery中发起Ajax请求的最常用的三个方法：$.get()， $.post()，$.ajax()。

$.get()函数的语法

jQuery中的$.get()函数的功能单一，专门用来发送get请求，从而将服务器上的资源请求到客户端进行使用

$.get('url',[data],[callback])

$.get()请求发起不带参数的请求

使用get函数发起不带参数的时候，直接提供请求的url地址和请求成功后的回调函数即可。

$.get('http://127.0.0.1/ajax',(res)=>{
      console.log(res)     //这里的res就是服务器响应回来的数据
})

使用get函数发起带参数的请求时，服务器就会将匹配这个参数的整个对象响应给客户端。

$.get('http://127.0.0.1/ajax',{id:1},(res)=>{
      console.log(res)     //这里的res就是服务器响应回来的数据
})

post函数语法

jQuery中的$.post()函数的功能单一，专门用来发送post请求，从而向服务器提交数据

$.post('url',[data],[callback])

向服务器提交数据案例

$.post(

    'http://127.0.0.1/api/books',
    {
        bookname:'水浒传'，
        author:'施耐庵'，
        publisher:'上海出版社'
    }，
    (res)=>{
        console.log(res)
    }
)

$.ajax函数的语法（这是最常用的语法）

相比于get和post函数，jQuery给我们提供的ajax函数是一个功能比较综合的参数，可以对Ajax请求进行更详细的配置。

$.ajax({
    type:'',    //请求方式，这里的type属性还可以是method
    url:'',     //请求地址
    data:[],    //请求携带的参数
    success:(res)=>{
        //请求成功后的回调函数
    }
})

接口

概念:使用Ajax请求数据时，被请求的url地址，就叫做接口地址（简称接口），同时每个接口必须有请求方式。

接口的请求过程

1.通过get方式请求接口的过程

2.通过post方式请求接口的过程

接口测试工具

为了验证接口能否正常被访问，我们常常需要接口测试工具，来对数据接口进行检测。

好处：接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试。

下载和安装PostMan官网地址：Download Postman | Get Started for Free.

工具使用方式

接口文档

作为一个前端人员，必须要会看接口文档，不然你连请求方式，请求地址，请求是否携带参数，如何携带参数，携带几个参数都会是一脸懵。

概念：接口文档，顾名思义就是接口的说明文档，它是我们调用接口的最好依据。好的接口文档包含了对接口url、参数和输出内容的说明，我们可以参考接口文档就知道接口的作用以及接口如何进行调用的。

接口文档的组成部分

接口文档可以包含很多信息，也可以按需进行精简。不过，一个合格的接口文档，应该包括以下6项内容，从而为接口的调用提供依据。

1.接口名称：用来标识各个接口的简单说明。

2.接口url：接口的调用地址

3.调用方式：接口的调用方式，如post和get

4.参数格式：接口需要传递参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明等4项内容。

5.响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明等3项类容

6.返回实例（可选）：通过对象的形式，例举服务器返回的数据的结构。

XMLHttpRequest

就是利用原生js向服务器发送请求。

概念：XMLHttpRequest简称（xhr）是浏览器提供的Javascript对象，通过它，可以请求服务器上的数据资源。之前所学的jQuery中的Ajax函数，就是基于xhr对象封装出来的。

利用xhr发送get请求

1.创建xhr对象

2.调用xhr.open()函数

3.调用xhr.send（）函数

4.监听xhr.onreadystatechange事件

//1.创建一个xhr对象

var xhr=new XMLHttpRequest()

//调用open函数，指定请求方式与url地址

xhr.open('GET','http://127.0.0.1')

//调用send函数，发起Ajax请求

xhr.send()

//监听onreadystatechange事件

xhr.onreadystatechange=function(){

    //监听xhr对象的请求状态readyState；与服务器响应状态status

    if(xhr.readyState===4&&xhr.status===200){

    }

}

利用xhr发起携带参数的get请求

//1.创建一个xhr对象

var xhr=new XMLHttpRequest()

//调用open函数，指定请求方式与url地址

xhr.open('GET','http://127.0.0.1/book?bookname=西游记')

//调用send函数，发起Ajax请求

xhr.send()

//监听onreadystatechange事件

xhr.onreadystatechange=function(){

    //监听xhr对象的请求状态readyState；与服务器响应状态status

    if(xhr.readyState===4&&xhr.status===200){

    }

}

查询字符串

定义：查询字符串（URL参数），是指在URL的末尾加上用于向服务器发送信息的字符串。

格式：将英文的？放在URL的末尾，然后再加上参数=值，想加上多个参数的话，使用&符号进行分割。以这个形式，可以将想要发送给服务器的数据添加到URL中。

$.ajax({method:'GET',url:'url',data:{name:'zs',age:20},success:function(){}})

//等价于

$.ajax({method:'GET',url:'url?name=zs&age=20',success:function(){}})

xhr发起post请求

1.创建xhr对象

2.调用xhr.open()函数

3.设置Content-Type属性（固定写法）

4.调用xhr.send（）函数

5.监听xhr.onreadystatechange事件

利用xhr发起post请求

//1.创建一个xhr对象

var xhr=new XMLHttpRequest()

//调用open函数，指定请求方式与url地址

xhr.open('POST','http://127.0.0.1')

//调用send函数，发起Ajax请求
//post请求的参数是写在send方法里面的

xhr.send('bookname=水浒传&author=施耐庵&pulisher=天津出版社')

//监听onreadystatechange事件

xhr.onreadystatechange=function(){

    //监听xhr对象的请求状态readyState；与服务器响应状态status

    if(xhr.readyState===4&&xhr.status===200){

    }

}