Ajax资源请求

1.资源的请求与发送

• get请求用于获取服务端资源
• post用于向服务器提交数据

2.Ajax

AJAX可以让我们轻松实现网页和服务器之间的数据交互

一些使用场景

1. 用户注册 动态监测用过户名是否被占用
2. 搜索关键字提示 动态加载搜索提示列表
3. 数据分页显示 根据页码值动态刷新表格的数据

jQuery中的Ajax

• $.get()

$.get(url,[data],[callback])//中括号表示可加可不加

参数名	参数类型	是否必选	说明
url	string	是	要请求的资源地址
data	object	否	请求资源期间要携带的参数
callback	function	否	请求成功时的回调函数

使用get发起不带参数的请求

发起带参数的请求

• $.post()

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

• $.ajax()

3.XMLHttpRequest

简称xhr,是浏览器提供的的js对象,通过它可以请求服务器的的数据资源

3.1原生GET请求方法

3.1.1GET请求

步骤:

1. 创建xhr对象
2. 调用xhr.open() 函数
3. 调用xhr.send() 函数
4. 监听xhr.onreadystatechange 事件

        //1.创建XHR对象
        const xhr = new XMLHttpRequest()
        //2.调用open函数
        xhr.open('GET', 'http:www.liulongbin.top:3006/api/gebooks?id=1')
//在发get请求时需要?id=1,是参数,叫做查询字符串
        //3.调用send函数
        xhr.send()
        //4.监听 onreadystatechange 事件
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                //获取服务器响应的数据
                console.log(xhr.responseText)
            }
        }
 

3.1.2xhr对象的属性

xhr对象中的readyState属性,用来表示当前Ajax请求所处的状态

值	状态	描述
0	UNSENT	XMLHttpRequest对象已经创建,但未被调用open()方法
1	OPENED	open()方法已经被调用
2	HEADERS_RECEIVED	send()方法已被调用,响应头也被接收
3	LOADING	数据请求中,此时response属性已经包含部分数据
4	DONE	Ajax请求完成,意味着数据传输已经彻底完成或失败

3.1.3查询字符串

定义:查询字符串(URL参数)是指在URL的末尾加上用于向服务器发送信息的字符串(变量)

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

GET请求携带参数的本质:无论是$.get(),还是 $.ajax(),又或是直接使用xhr对象发起GET请求,需要携带参数的时候本质上,都是直接将参数以查询字符串的形式,追加到URL地址的后面,发送到服务器的

    
        $.get('url', { name: 'zs', age: 20, function() { } })
        //等价于
        $.get('url?name=zs&age=20', function () { })
        //等价于
        $.ajax({
            method: 'GET',
            url: 'url',
            data: { name: 'zs', age: 20 },
            success: function () { }
        })
        //等价于
        $.ajax({
            method: 'GET',
            url: 'url?name=zs&age=20',
            success: function () { }

        })
   

3.1.4URL编码与解码

URL编码原则通俗理解就是:使用英文字符去表示非英文字符

例如:

http:www.liulongbin.top:3006/api/getbooks?id=1&name=西游记
//经过URL编码后
http:www.liulongbin.top:3006/api/getbooks?id=1&name=%E8%A5%BF%E6%B8%B8%E8%AE%B0

浏览器提供了URL编码与解码的API

• encodeURL 编码
• decodeURL 解码

encodeURL('黑马')
//输出字符 %E9%BB%91%E9%A9%AC
decodeURL('%E9%BB%91%E9%A9%AC')
//输出字符 黑马

3.2xhrPOST请求

   //1.创建 xhr 对象
        const xhr = new XMLHttpRequest()
        //2. 调用 open()
        xhr.open('POST','http:www.liulongbin.top:3006/api/addbooks')
        //3.设置 Content-Type 属性(固定写法)
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        //4. 调用send() 同时将数据以查询字符串的形式,提交给服务器
        xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
        //5.监听 onreadystatechange 事件
        xhr.onreadystatechange = function () {
            if (xhr.readyStatus === 4 && xhr.status === 200)
                console.log(xhr.responseText)
        }