【JS】Day25

学习内容

• AJAX
• AJAX请求
• AJAX的工作原理
• 案例 (HTML)

AJAX

//ajax 就是异步与服务器进行通信，将服务器响应的数据通过 javascript 动态的添加到页面中。
//ajax 全名 async javascript and XML。
//是前后台交互的能力。
//也就是我们客户端给服务端发送消息的工具，以及接受响应的工具。
//是一个 默认异步 执行机制的功能。
//什么是JSON: 它是一种可以跨平台、跨语言的一种公共数据格式 (普通话)。
//JSON的格式:
  //[] : 写在[]中的字符串，必须使用双引号。
    //1. 原生: ['a',"b"]
    //2. JSON: ["a","b"]
  //{} : key 必须加双引号，value如果是字符串，必须加双引号。
    //1. 原生：{ name : '张三'} {name : "张三"} { 'name': '张三'} { "name": "张三"}
    //2. JSON: { "name" : "张三" }
  //在JSON的值中: NaN undefined infinity function 这值不允许出现在JSON对象中，一个json文件中只能有一个json数据。
//通过异步与服务器通信，将用户请求的数据通过回调函数返回，并利用javascript将数据动态的添加到页面中，且整个过程不需要重新加载整个页面就可以完成。

//AJAX 的优势

//1. 异步与服务器通信
//2. 不需要刷新页面就可以更新数据
//3. 减少服务器负担，实现前后端负载平衡
//4. 缺点： 搜索引擎的支持度不够，因为数据都不在页面上，搜索引擎搜索不到
//5. 缺点：没有历史记录
//6. 缺点：存在风险

//AJAX 的使用

//在 js 中有内置的构造函数来创建 ajax 对象
//创建 ajax 对象以后，我们就使用 ajax 对象的方法去发送请求和接受响应

<form action="http://www.baidu.com" method="get">
<input type="text" name="username" id="">
<input type="submit" value="提交">
</form>

AJAX请求

//一个基本的 AJAX 请求

//一个最基本的 ajax 请求
  //1. 创建一个 ajax 对象
    //上面就是有了一个 ajax 对象
    //我们就可以使用这个 `xhr` 对象来发送 ajax 请求了
  //2. 配置链接信息
    //上面的代码执行完毕以后，本次请求的基本配置信息就写完了
  //3. 发送请求
    //上面代码是把配置好信息的 ajax 对象发送到服务端
//但是光有上面的三个步骤，我们确实能把请求发送的到服务端
//如果服务端正常的话，响应也能回到客户端
//但是我们拿不到响应
//如果想拿到响应，我们有两个前提条件
  //1. 本次 HTTP 请求是成功的，也就是我们之前说的 http 状态码为 200 ~ 299
  //2. ajax 对象也有自己的状态码，用来表示本次 ajax 请求中各个阶段

//AJAX 状态码

//ajax 状态码 - xhr.readyState
//是用来表示一个 ajax 请求的全部过程中的某一个状态
  //readyState === 0: 表示未初始化完成，也就是 open 方法还没有执行
  //readyState === 1: 表示配置信息已经完成，也就是执行完 open 之后
  //readyState === 2: 表示 send 方法已经执行完成
  //readyState === 3: 表示正在解析响应内容
  //readyState === 4: 表示响应内容已经解析完毕，可以在客户端使用了
//这个时候我们就会发现，当一个 AJAX 请求的全部过程中，只有当 readyState === 4 的时候，我们才可以正常使用服务端给我们的数据
//所以，配合 http 状态码为 200 ~ 299
  //一个 ajax 对象中有一个成员叫做 xhr.status
  //这个成员就是记录本次请求的 http 状态码的
//两个条件都满足的时候，才是本次请求正常完成

//readyStateChange

//在 ajax 对象中有一个事件，叫做 readyStateChange 事件
//这个事件是专门用来监听 ajax 对象的 readyState 值改变的的行为
//也就是说只要 readyState 的值发生变化了，那么就会触发该事件
//所以我们就在这个事件中来监听 ajax 的 readyState 是不是到 4 了

//responseText

//ajax 对象中的 responseText 成员
//就是用来记录服务端给我们的响应体内容的
//所以我们就用这个成员来获取响应体内容就可以

//1. 买手机        1. 创建XMLHttpRequest对象
//let xhr = new XMLHttpRequest();  //除了IE6都支持
//IE6支持
//let xhr = new ActiveXObject('Microsoft.XMLHTTP');
//兼容
let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
// alert(xhr);
//2. 打电话(拨号)        2. 与服务器建立连接
//第一个参数：请求方式（get/post/delete/put....)
//第二个参数：请求的URL地址
//第三个参数：是否异步请求 true(默认：异步)  false(同步)
xhr.open('get','http://localhost:8888/test/first',true);
//3. 说话        3. 发送请求
xhr.send();
//4. 听        4. 等待响应
xhr.onload = function(){
    //我们怎么就能拿到后端响应的数据？  xhr.responseText
    console.log(xhr.responseText);
}

AJAX的工作原理

//前后端交互，首先需要创建一个XMLHttpRequest对象，通过这个对象的open方法与服务器建立连接，通过send方法将请求发送给服务器，最后通过事件监听，将后端请求的数据通过回调函数返回给前端。

//使用 ajax 发送请求时携带参数

//我们使用 ajax 发送请求也是可以携带参数的
//参数就是和后台交互的时候给他的一些信息
//但是携带参数 get 和 post 两个方式还是有区别的

//发送一个带有参数的 get 请求

//get 请求的参数就直接在 url 后面进行拼接就可以
    const xhr = new XMLHttpRequest()
    //直接在地址后面加一个 ?，然后以 key=value 的形式传递
    //两个数据之间以 & 分割
    xhr.open('get', './data.php?a=100&b=200')
    xhr.send()
  //这样服务端就能接受到两个参数
  //一个是 a，值是 100
  //一个是 b，值是 200

//发送一个带有参数的 post 请求

//post 请求的参数是携带在请求体中的，所以不需要再 url 后面拼接
    const xhr = new XMLHttpRequest()
    xhr.open('get', './data.php')
    // 如果是用 ajax 对象发送 post 请求，必须要先设置一下请求头中的 content-type
    // 告诉一下服务端我给你的是一个什么样子的数据格式
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
    // 请求体直接再 send 的时候写在 () 里面就行
    // 不需要问号，直接就是 'key=value&key=value' 的形式
    xhr.send('a=100&b=200')
  //application/x-www-form-urlencoded 表示的数据格式就是 key=value&key=value

//get与post的区别？

//get
//1. 传递速度快
//2. 传递数据大小为1KB
//3. 参数在url地址后面传递
//4. get以明文方式传递参数，所以不安全。
//5. get会留下历史记录
//post
//1. 传递速度慢
//2. 传递数据大小为 2MB
//3. 参数在http协议的请求体中传递
//4. post传递参数相对安全。
//5. 不会留下历史记录