AJAX—基础

Ajax基础

概述

已知发送请求的方式：

地址栏输入地址，回车刷新、特定元素的href属性、表单提交，一般来说都是通过浏览器操作的，这些方案无法通过代码方式实现对服务器端发送请求

需求：

对服务器发出请求并且能够接收服务端返回的响应，通过js直接发送网络请求，web的可能就会更多，实现的功能也就越多

Google Suggest：

1、是在浏览器端进行网络编程（发送请求、接收响应）的技术方案

2、可以直接获取服务端的内容而不用重新加载页面

Ajax：

1、浏览器提供的一套API，可以通过JS调用，实现通过代码控制请求和响应，实现js网络编程

2、XML:在客户端和服务端之间传递数据时采用的数据格式

3、能够按需获取数据、对用户数据进行校验、自动更新页面的内容、提高用户无刷新的体验

原生Ajax发送请求步骤

1、创建XMLHttpRequest类型对象——相当于打开了一个浏览器

var xhr = new XMLHttpRequest();

2、准备发送，打开与一个网址之间的连接——相当于在地址栏输入网址

xhr.open("GET", "https://jsonplaceholder.typicode.com/users");

3、执行发送动作——相当于点击回车或者超链接

xhr.send(null);

4、指定xhr状态变化的事件处理函数——相当于处理网页呈现后的操作

xhr.onreadystatechange = function()
 {
    if (this.readyState === 4)
    {  console.log(this.responseText); }
 }

• 先判断xhr的readystate确定此次状态是否完成
• 得到的内容存在于一个响应体中responseText

xhr对象

AJAX API中提供的是一个XMLHttpRequest类型，所有的AJAX操作都需要用到这个类型

if (window.XMLHttpRequest) { xhr = new XMLHttpRequest();} 
//IE6兼容性
else { xhr = new ActiveXObject("Microsoft.XMLHTTP");}

open方法

本质上XMLHttpRequest是js在web平台发送的HTTP请求的手段，所以我们发出的HTTP请求同样要符合HTTP约定的格式

xhr.open(method,url)

• method：要使用的HTTP方法，比如GET、POST、PUT、DELETE等
• url：要向其发送请求的URL地址

send方法

用于发送HTTP请求

xhr.send(body)

• body：在XHR请求中要发送的数据体，根据请求头中的类型进行传参，如果是GET，无需设置数据体，可以传null或者不传参

  xhr.open
  ("GET", "https://jsonplaceholder.typicode.com/users?id=1");
  

• 如果是别的方法open（）方法和send（）方法之间需要请求头

  xhr.open
  ("POST", "https://jsonplaceholder.typicode.com/users");
  //xhr.setRequestHeader(header,value);
  //header是传输数据类型，即服务器需要我们传送的数据类型，value是具体的数据类型，常用“application/x-www-form-urlencoded”和“application/json”
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//会在后面追加一条新的信息内容
  xhr.send("name=harry&age=19");//内容写法有多种
  

响应状态

readyState属性返回一个XMLHttpRequest代理当前所处的状态，readystatechange事件是在xhr对象状态变化的时候触发，意味着这个事件会被触发多次，在不同状态下readyState值也不同

状态值表示

不同阶段状态

同步和异步

xhr.open（）第三个参数为Boolean值，用来设置此次请求是否采用异步方式执行

同步：一个人在一个时刻只能做一件事，在执行一些耗时操作是不去做别的事，只是等待（false）,设置同步加载会卡在send（）部分，需要将onready事件向前提

异步：在执行耗时的事情的时候，不是等待而是去做别的事（true）

数据格式

如果希望服务器端返回一个复杂数据，该如何处理？服务器端发出何种格式的数据，这种格式如何在客户端用JS解析

xml

传统的数据描述手段

• 元数据：用于描述数据的数据，占用的数据量比较大
• 数据冗余较多，不利于大量数据的网络传输

json

JS对象表示法，类似于JS字面量的表示，其中的区别：

• JSON数据不需要存在变量中，结束不需要写分号，属性名必须加引号

JSON字符串格式和对象格式的相互转化

var str = `{"name":"hob","age":18}`;
//parse方法是将JSON字符串转化为对象格式
console.log(JSON.parse(str)); //{name: "hob", age: 18}
//stringify方法是将对象格式转化为JSON字符串格式
console.log(JSON.stringify(obj)); //{"name":"Tom","age":"20","cp":{"name":"Cherry"}}

json-server

是一个Node模块，运行Express服务器，可以指定一个json文件作为api的数据源 ，快速搭建web服务器

https://github.com/typicode/json-server

• json-server的安装

• 定制一个我们自己的json文件

• 部署到服务器之上，根据分配的地址进行访问
  

*当我们通过vs输入命令运行的时候，实际上打开了一个终端执行，这样没打开一个就是占用一个端口号，需要我们关闭运行内容后，才能重新测试新的文件 *

使用方法

分配资源路由名称，可以通过路由进行查找，增删改

原生Ajax应用

GET方法

请求过程中，参数传递都是通过URL地址中的‘？’参数传递，无需设置请求头,也无需设置响应体，可以传null或者不传

xhr.open
("GET", "https://jsonplaceholder.typicode.com/users?id=1");

POST方法

在请求过程中，都是采用请求体承载需要提交的数据，设置请求头中的Content-Type以便于服务器端接收数据，需要提交到服务器的数据通过send参数传递

xhr.open("POST", "http://localhost:3000/users");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=lily&age=22&class=4");

• 一方面会在控制台进行内容的输出，另一方面还会将我们添加的内容追加到我们的json文件中去
• 如果使用value=x-www-form-urlencoded就需要用&将参数连接
• 使用value=json的在send发送请求传参是json格式的

响应数据渲染

如果数据结构简单，可以直接通过字符串拼接的方法处理

 xhr.onreadystatechange = function() {
 if (this.readyState === 4) {
 //将json数据转化为对象
 var data = JSON.parse(this.responseText);
 var str = ""//使用字符串追加的方法进行数据的添加
 for (var i = 0; i < data.length; i++) {
 tr += "<tr><td>" + data[i].id + "</td><td>" + data[i].name + "</td><td>" + data[i].age + "</td><td>" + data[i].class + "</td></tr>"  }
 box.innerHTML += str;}}

如果数据较大的时候，我们就需要采用ES6提供的模板字符串

 str += `<tr>
    <td>${data[i].id}</td>
    <td>${data[i].name}</td>
    <td>${data[i].age}</td>
    <td>${data[i].clss}</td>
</tr>`

封装Ajax函数

了解封装的过程， 一般在开发中使用第三方提供的AJAX库，在后续开发过程中可以更方便使用这套API，将其封装到一个函数中

参数1：{string} method 请求方法

** 参数2：{string} url 请求地址*

** 参数3：{Object} params 请求参数*

** 参数4：{function} done 请求完成后执行的回调函数*

下篇内容更精彩！！