JS - 笔记2-4，1_ajax - 《学习笔记》

ajax 发送get请求
ajax.onreadystatechange
ajax.readyState
ajax.status 状态码
ajax 发送post请求
GET、POST两者区别
JSON
跨域请求：
- 跨域请求发送的过程：
- 解决跨域请求的方案：
JSONP
- 发送JSONP 请求的步骤
- JSONP原理

Ajax: AsynchronousJavaScriptAndXML(JSON)
可以做到不必刷新页面也能取得数据、页面加载后进行页面的局部更新.

ajax 发送get请求

  // ajax 发送get请求
  //  1.创建一个ajax对象
var ajax = newXMLHttpRequest();
  //  2.配置这个对象： 
ajax.open(请求的类型，请求的路径，是否异步)
ajax.open('GET', './test1.txt', true);
  // 4.接收响应
ajax.onreadystatechange = function () {
  if(ajax.readyState !== 4) {
    return;
   }
  //代码运行到此，说明readyState为4
  // 此时页面已经收到了全部响应，但是响应的结果是什么我们还需要判断。
  // 响应结果：
  // 成功： 200
  // 请求的资源不存在： 404
  // 上面两个数字，叫做response的状态码
  if(ajax.status>=200 && ajax.status<300) {
  //请求成功。取得返回的响应数据
    alert(ajax.responseText); //字符串类型
   } else {
  //请求失败
    console.log('请求失败。原因：', ajax.status);
   }
}
  // 3.发送请求
  // ajax.send(null); 兼容移动端的某些浏览器兼容性
ajax.send();
  //ajax发送post请求：
document.querySelector('button').onclick = function () {
  var user = document.querySelector('#username').value;
  var pw = document.querySelector('#password').value;
  //发送post的ajax请求
  var xhr = newXMLHttpRequest();
  xhr.open('post', '/api/register', true);
  xhr.onreadystatechange = function () {
    if(xhr.readyState !== 4) {
      return;
     }
    if(xhr.status>=200 && xhr.status<300) {
        //请求成功
      var result = JSON.parse(xhr.responseText);
      if(result.ret) {
        //注册成功
        location.href = './login.html';
        //注册失败
       }
     } else {
      //请求失败
     }
  }
  //通知服务器，发送数据的格式是form表单格式
  xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
  //send的参数，就是ajax请求的请求体
  xhr.send('user=' + user + '&password=' + pw);
 }

ajax.onreadystatechange

该事件在监听ajax对象的readyState的改变。当readyState一改变，该事件就触发

ajax.readyState

ajax对象的一个属性，该属性标明了这个对象状态

0 ajax对象刚刚创建，但是没有调用open
1 调用了open，但是没调用send
2 调用了send，但是没收到响应
3 收到了部分响应
4 收到了全部响应（最需要关心的状态）
ajax.status 状态码
2XX: 成功
3XX: 请求被重定向
4XX: 请求的错误
5XX: 服务器错误
0 本地请求，服务器成功返回了页面
200 OK 服务器成功返回了页面
400 BadRequest 语法错误导致服务器不识别
401 Unauthorized请求需要用户认证
404 Notfound指定的URL在服务器上找不到
500 InternalServerError服务器遇到意外错误，无法完成请求
503 ServiceUnavailable由于服务器过载或维护导致无法完成请求
状态码被放在了ajax对象的status属性上

ajax 发送post请求

POST请求发送ajax的步骤，与get不同的。

open() 的第一个参数不同
send() 需要有参数(http请求的body中的内容)
说明body中的内容的数据格式

GET

发送给服务器的参数，放在了请求的地址上，以search的形式发送。

参数的格式为：name1=value1&name2=value2
POST

将参数放在了请求体中

HTTP请求的数据包格式为：
请求行
请求头1: value1
请求头2: value2
……
空行
请求体

GET、POST两者区别

目的不同

GET: 获取数据
POST: 提交数据

安全级别

GET: 数据在URL中，不安全
POST: 更安全(1.无法直接看到数据内容， 2.HTTPS请求，post是加密的)

数据大小

GET: 有大小限制
POST: 没有大小限制

JSON

JSON是JavaScript的一个严格的子集，利用JavaScript中的一些模式来表示结构化数据。

数据交换格式,ecma定义的标准，编码为404。ecma-404

JSON的语法可以表示三种类型的值：

简单值：可以在JSON中表示字符串、数值、布尔值和null。
但JSON不支持JavaScript中的特殊值undefined。

var obj = '{}'; //空对象
var obj2 = '{"age":18}'//有一个键值对的对象
var obj3 = '{"age":18, "gender":"male"}'
var obj4 = '[]'//空数组
var obj5 = '[1, 2, 3]'//有多个元素的数组

序列化和解析

序列化：JSON.stringify()
从JSON对象 -> 对应的字符串的过程

var xiaoming = {name:’xiaoming’, age:1}
var jsonStr = JSON.stringify(xiaoming) //调用

解析： JSON.parse(jsonStr)
从一个满足JSON对象规则的字符串 -> JSON对象的过程
JSON.parse(jsonStr) //调用

跨域请求：

跨过当前所在的服务器，向其他服务器发送请求。
当Ajax请求的资源路径，与其页面所在的服务器，只要有下面一个不同，则属于“跨域请求”。
分别是：协议，域名，端口号
默认情况下，Ajax发送跨域请求会失败。（但是若是后端加了些东西可以实现）

跨域请求发送的过程：

浏览器把请求发送给数据
服务器给出响应
浏览器判断该请求是否为跨域，请求如果为跨域，则默认报错。

解决跨域请求的方案：
JSONP （前后端一起实现，与json没有任何关系）

兼容性好，只能发get请求。

反向代理 (后面这俩都后端自己弄)
CORS （crossoriginresourceshare）

JSONP

发送JSONP 请求的步骤

创建一个全局函数，该函数有一个形参，形参就是用来接收数据的。

function getBaiduList (data) {
// 当该函数被调用，说明我们已经接收到了数据，data就是那个数据，接下来便可以处理数据。
}

创建一个动态script标签

var script = document.createElement('script');

根据后端提供的接口，为script标签的src属性赋值，其中一个关键信息：告诉后端我们定义的函数名字
```
script.src = ''
```
将script标签上树
```
document.Body.appendChild(script)
```
标签上树后：
该标签请求了一段JS代码
服务器在得到请求后，会回应给一段JS代码
当服务器收到这段代码后，会先解析再执行
执行的结果就是我们定义的全局函数被调用了，且参数就是需要的数据。
JSONP原理
利用script标签可以跨域，来实现的跨域请求
在浏览器发送一个script请求(请求中包含了全局函数的名字)后，
后端给我们的代码，就是调用这个函数，并将数据作为了实参

笔记2-4，1_ajax