Ajax用法总结

目录

Ajax简介

Ajax使用

xhr内部五种状态

Ajax在IE浏览器上存在的缓存问题

如何发送post请求

如何取消Ajax请求

​编辑

jQuery封装的Ajax如何使用?

Ajax用法总结_第1张图片

Ajax简介

Ajax全称为Asynchous Javascript And XML,即异步的JS和XML,通过Ajax可以在浏览器中向服务器发送异步请求,其最大的特点是实现:

页面无刷新获取数据

工作原理其实相当于在用户和服务器之间加上了一个中间层(Ajax引擎),使用户操作与服务器响应异步化;

它不是一个新的编程语言,而是一种将现有标准组合在一起使用的技术方案,但并不是一种新技术;它依赖的是现有的CSS/HTML/Javascript,而其中最核心的依赖是浏览器提供的XMLHttpRequest对象,是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。

Ajax用法总结_第2张图片

优点:

  • Ajax无需刷新页面即可与服务器端进行通信
  • 可允许用户根据用户事件来更新部分页面内容

缺点:

  • 并没有浏览历史,不能回退(因为无刷新页面)
  • 存在跨域问题
  • SEO不友好

补充:

此处XML指可扩展标记语言,它和HTML类似,不同的是HTML中都是预定义标签,而XML中没有预定义标签,全都是自定义标签,用于表示一些数据(后逐步被json替代,但微信公众号等应用中还会用到)

    // 用XML表示person数据
    
        小明
        12
    

Ajax使用

利用XMLHttpRequest(以下简称xhr)发送Ajax请求,各个功能说明如下:

const xhr = new XMLHttpRequest()      // 创建XMLHttpRequest实例对象

xhr.open(method, url)    // 配置请求

xhr.setRequestHeader(key, value)      // 设置请求头(可选)

xhr.timeout  = 2000 //  请求超时时间

xhr.send()    //  发送请求, get请求不传body参数

xhr.onreadystatechange = () => {

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

                // 对响应的处理

        }

}  //  接收响应

xhr.onerror = ( )  => {

        // 对请求出错的处理

}

xhr.ontimeout = () => {

       // 对超时出错的处理

}

xhr.abort() // 取消请求

 示例:get携带params参数id请求name属性:

    
    

xhr内部五种状态

xhr内部有五种状态,分别是0/1/2/3/4,经过了四次状态转变;

0:在xhr实例对new出来的那一刻状态即为0(初始状态);

1:在open()调用之后,状态变为1,此时可以修改请求头内容;

2:在send()调用之后,此处调用请求头报错;

3:已经返回一部分简单数据和响应头;

4:所有数据都已经返回回来;

Ajax在IE浏览器上存在的缓存问题

问题描述:在IE浏览器中,由于缓存机制的存在,A若发送相同的ajax get请求时(post请求无此问题),只会将第一次请求发送出去,剩余的多次会直接使用缓存中的数据;

如多次请求get接口http://localhost:8080/get_name,ie浏览器会默认将第一次得到的数据直接返回过去,不再请求服务器,但是如果该接口返回的数据在别处进行了修改后 ,即发生了改变后,此时再用缓存中的数据就不对了,所以要让ie浏览器在每次调用相同接口时,都要重新请求服务器,解决方法就是在接口地址上加上时间戳参数:'http://localhost:8080/get_name?t=' + Date.now()`

如何发送post请求

众所周知,发送post请求有三种携带参数方式,query、params以及请求体方式,其中请求体方式有两种参数方式----urlencoded以及json方式,这部分内容介绍可参见文章后面补充;一般情况下,使用post方式配合请求体传参;

在Ajax中,若要用post方式,则要声明对应的请求头参数:

// 二选一
xhr.setRequestHeader('Content-type', 'application/json') // json方式传参
xhr.setRequestHeader('Content-type', 'application/x-www-form-rulencoded') // urlencoded方式传参

同时要在xhr.send()配置要传输的参数,要与请求头设置的方式对应;

// json方式
const person = {name: '小明', age: 12}
xhr.send(JSON.stringify(person))

// urlencoded方式
xhr.send('name=小明&age=12')

完整示例:post方式请求http://localhost:9123/students下的数据,并携带请求体参数name和age


    
    

如何取消Ajax请求

所谓取消,是指在发出Ajax请求后,通过用户交互(如点击取消按钮)取消刚刚发送的Ajax请求;

使用xhr.abort()即可;

如下示例展示如何在点击多次请求后,只保留最后一次接口请求:


    
    
    

jQuery封装的Ajax如何使用?

jQuery对Ajax进行了封装,使得原生xhr方式更加简单,仅供了解:

代码中引入jQuery库后,全局中就会出现$和jQuery变量;

发送post请求简单形式:

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

url: 请求的URL地址;

data: 请求携带的参数;

callback: 请求成功时的回调函数;

type: 设置请求返回的内容格式,如json、html、xml等

发送get请求简单形式:

 $.get(url, [data], [callback], [type])   参数含义与上相同

发送完整请求例子: 


    
    
    
    

jQuery默认传的请求体形式为urlencoded形式

上面post请求的简单版示例为:

 btn2.click(() => {
    $.post('http://localhost:9123/students', {id: 1}, (res)=> {
       console.log(res);
       span.html(JSON.stringify(res)) 
    })
 })

你可能感兴趣的:(前端知识,ajax,jQuery)