学习Ajax的第一天

ajax的概念

即 Asynchronous Javascript And XML的缩写，AJAX 不是一门的新的语言，而是对现有持术的综合利用。

  	1. 基于web标签的html+css
 	2. 可以使用dom进行动态的显示和交互
 	3. 使用XML和XSLT(是一种用于将XML转换为任意文本的描述语言)进行数据的交换和操作
 	4. 使用**XMLHttpRequest**进行异步的数据查询和检索等操作。。。

本质:是在HTTP协议的基础上以异步的方式通过XMLHttpRequest这个异步对象与服务器进行通信。

作用：可以在页面不刷新的情况下，请求服务器，局部更新页面的数据。

异步（Asynchronous ）

指某段程序执行时不会阻塞其它程序的执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序。

同步的表现形式则相反。

同步：同一时刻只能做一件事，上一步完成才能开始下一步

异步的优势：

同时做多件事，不会阻塞程序的执行，从而提升整体代码的执行效率

XMLHttpRequest这个异步对象可以以异步的方式来处理程序。

XMLHttpRequest 异步对象

浏览器的内建对象，用于在后台与服务器通信(交换数据) ，由此我们便可实现对网页的部分更新，而不是刷新整个页面。

下面是一个简单的例子(获取验证码)：

// 这只是一个示例，不用考虑他所实现的功能
var xhr = new XMLHttpRequest()
xhr.open('post','http://127.0.0.1:3002/getcode')
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send('phone=12345678910')
xhr.onload = function () {
    console.log(this.response);
}

由于XMLHttpRequest本质基于HTTP协议实现通信，所以结合HTTP协议和上面的例子我们分析得出如下结果：

请求

HTTP请求3个组成部分与XMLHttpRequest方法的对应关系

1、请求行

xhr.open('post','http://127.0.0.1:3002/getcode')

post方式的请求不用在url中拼接参数

2、请求头

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

get 请求可以不设置请求头

3、请求体

xhr.send('phone=12345678910')

get的参数在url中拼接 ，所以send里面可以传入null或者不传

响应

HTTP响应是由服务端发出的，作为客户端更应关心的是响应的结果。

由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。

// 当服务器响应之后，会自动的触发onload事件，在这个事件里面我们可以获取服务器所返回的所有详细数据，然后根据自己的需要进行处理
xhr.onload = function () {
    console.log(this.response);
}

使用异步对象验证用户名是否重复案例

html代码如下：

<form action="">
	   用户名：<input type="text" name='name' class="username">
	   <span class="msg"></span> <br>
	   密码：<input type="text" name='pass'> <br>
	   <input type="submit" value="注册">
</form>

js代码如下：

/* 
   input输入框的事件：
       onblur：失去焦点触发（只要失去焦点就会触发）
       onchange：失去焦点触发（失去焦点的同时，数据发生变化了才会触发） 
*/
document.querySelector('.username').onchange = function () {
   // 获取用户输入的值
   let name = this.value;
   // 我们可以通过一个对象帮我们进行请求的发送和响应的接收
   // 这种对象就是异步对象，它能实现客户端和服务端的交互（向服务器发送请求，接收服务器的响应数据）
   // XMLHttpRequest就是这个异步对象

   // 1. 创建异步对象
   let xhr = new XMLHttpRequest();
   // 2. 让异步对象发送请求
   // 请求方式
   // 确认服务器完整地址： 协议 + IP + 端口 + 请求url
   // 是否需要传递参数，get请求的参数需要在url中拼接
   // 2.1、确定请求地址和请求参数，通过open方法可以实现这个配置
   xhr.open('get', 'http://127.0.0.1:3002/validataUserName?name=' + name);
   // 2.2、发请求， 通过send方法可以发起请求 
   xhr.send();

   // 3. 让异步对象接收响应
   // 当异步对象获取到服务器的响应数据时，会自动的触发onload事件
   // 同时给这个事件处理函数一个参数xhr，服务器的返回值就是存储在xhr.response属性中
   xhr.onload = function () {
       // console.log(xhr.response);  //拿到的是一个json格式的字符串，需要转成js数据类型
       let obj = JSON.parse(xhr.response)
       // console.log(obj);
       document.querySelector('.msg').innerHTML = obj.msg;
   }
}

get方式请求案例

需求：获取所有用户数据,并实现简易的动态渲染

html代码如下：

<button class="btn">点我获取数据</button>
<table>
    <thead>
        <tr>
            <th>用户名</th>
            <th>密码</th>
            <th>手机号码</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

js代码如下：

document.querySelector('.btn').onclick = function () {
    // 1、创建异步对象
    let xhr = new XMLHttpRequest();
    // 2、发送请求
    // open设置请求方式
    xhr.open('get', 'http://127.0.0.1:3002/getUserList');
    // send发送请求
    xhr.send();
    // 3、响应请求
    xhr.onload = function () {
        // 将拿到的json格式字符串转换成js数据类型
        let res = JSON.parse(xhr.response);
        // console.log(res);
        // 判断是否获取成功
        // 定义一个空变量，用于存放动态拿到的数据
        let str = ''
        if (res.msg == '获取成功') {
            // 遍历res对象里的data数组，data数组里的每个下标都对应着一个对象
            for (let i = 0; i < res.data.length; i++) {
                // 每遍历一个下标都会获取到一个对象，拿到对象里的具体值，并动态生成一个结构
                // 将每个对象所生成的结构拼接起来，存放到str变量中
                str += `
            <tr>
                <th>${res.data[i].username}</th>
                <th>${res.data[i].password}</th>
                <th>${res.data[i].phone}</th>
            </tr>`
            }
        }

        // 将str内所存储的数据渲染到页面中
        document.querySelector('tbody').innerHTML = str
    }
}

post方式请求案例

需求：实现登陆的注册

1.使用XMLHttpRequest发送异步请求

2.添加onload监听，接收返回数据并给出用户提示

html代码如下：

<form action="">
    用户名：<input type="text" name='username' class="uname"> <br>
    密码：<input type="text" name="password" class="upass"> <br>
    手机号码：<input type="text" name="phone" class="uphone"> <br>
    <input type="button" value="注册" class="btn">
</form>

js代码如下：

document.querySelector('.btn').onclick = function () {
	let user = document.querySelector('.uname').value;
	let pwd = document.querySelector('.upass').value;
	let phone = document.querySelector('.uphone').value;
	
	// 1.定义异步对象
	let xhr = new XMLHttpRequest();
	// 2.发送请求
	// 2.1 确认请求方式，请求地址
	// post请求方式的参数不在url中拼接
	xhr.open('post', 'http://127.0.0.1:3002/addUser');
	// 2.2 post方式的请求如果有参数，就一定要设置请求头，因为post请求方式的参数的编码和get不一样，所以我们得进行编码格式的处理，否则参数传递了服务器也无法真正的获取
	// 通过setRequestHeader()方法可以设置请求头Content-Type,它就可以指定参数的编码格式
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
	// 2.3 发送请求,post请求方式的参数写在这里
	xhr.send(`username=${user}&password=${pwd}&phone=${phone}`)
	
	// 3. 接收响应
	xhr.onload = function () {
	    // 3.1 获取数据，并转为js数据类型
	    let res = JSON.parse(xhr.response);
	    // console.log(res);
	    // 3.2 打印输出注册结果：注册成功 | 注册失败
	    alert(res.msg)
	}
}

注:GET和POST请求方式的差异

1、GET没有请求主体，使用xhr.send(null)

2、GET可以通过在请求URL上添加请求参数

3、POST可以通过xhr.send(‘name=itcast&age=10’)

4、POST需要设置

Content-Type:application/x-www-form-urlencoded

5、GET大小限制约4K，POST则没有这个限制

ajax的补充

异步对象的响应事件除了onload外，还有onreadystatechange

在通过Ajax向服务器发送请求的过程中，XMLHttpRequest对象的状态会发生多次变化。由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被触发多次。

onreadystatechange 是 Javascript 事件的一种，其意义在于监听 XMLHttpRequest 的状态 。

...发送请求...
// 接收响应
xhr.onreadystatechange = function () {
    console.log('事件被触发了')
}

常见属性和方法

1、获取状态行（包括状态码&状态信息）

2、获取响应头

3、响应主体

我们需要检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML

API 详解

xhr.open() ：发起请求，可以是get、post方式

xhr.setRequestHeader() ：设置请求头

xhr.send() ：发送请求，主体为get方式时使用 xhr.send(null)

xhr.onreadystatechange = function () {} ：监听响应状态

readstate 属性有五个状态：

- xhr.readyState = 0时，（未初始化）还没有调用send()方法
- xhr.readyState = 1时，（载入）已调用send()方法，正在发送请求
- xhr.readyState = 2时，（载入完成）send()方法执行完成，已经接收到全部响应内容
- xhr.readyState = 3时，（交互）正在解析响应内容
- xhr.readyState = 4时，（完成）响应内容解析完成，可以在客户端调用了

xhr.status表示响应码，如200

xhr.statusText表示响应信息，如OK

xhr.getAllResponseHeaders(): 获取全部响应头信息

xhr.getResponseHeader('key'): 获取指定头信息

xhr.responseText、xhr.responseXML都表示响应主体

JSON

即 JavaScript Object Notation，是一种轻量级的文本数据交换格式，独立于语言。

1. 它是用来描述数据的

2. 它是字符串

3. 永远不要在json文件中添加注释

4. 键和值都需要使用双引号，除非这个值是数值或bool值

语法规则

1、数据在名称/值对中

2、数据由逗号分隔(最后一个健/值对不能带逗号)

3、花括号保存对象方括号保存数组

4、键和值都使用双引号包含，除非值是数值或者bool类型

JSON()的解析

JSON数据在不同的语言进行传输时，类型均为字符串，不同的语言各自也都对应有解析方法，需要解析完成后才能读取，下面是在js中的解析方法：

1、JSON.parse(json字符串)：将json字符串转换为js对象

2、JSON.stringify(js数组或对象)：将js对象转换为json格式字符串

总结：JSON体积小、解析方便且高效，在实际开发成为首选。