AJAX-客户端服务器端通信

AJAX

客户端和服务器端的交互，是如何进行通信的。所有发请求建立连接这些事情，都跟代码没干系，都是浏览器帮我们发请求的；遇到link img script也是浏览器主动发请求做这件事情。

还有一部分信息并不是浏览器主动发请求的，得需要我们告诉浏览器怎么发请求，拿到数据之后我们自己去处理。

浏览器自动发请求：到此为止，页面有了结构、样式，还有一些js功能，但是页面上是没有数据的。但是数据是动态的，这些是需要我们单独向服务器发请求的。这次获取的不是页面而是数据。这就需要ajax。

ajax：客户端和服务器端交互的基本都是一样的，都是URL解析，dns解析，都要发送东西，都要接收返回结果。只不过这些是需要我们自己写代码请求然后自己写代码把数据绑定到页面上，拿到数据后你爱干嘛干嘛。ajax是客户端和服务器端的数据交互。

异步：定时器 事件绑定 promise 回调。js单线程事件循环&事件队列。

整个js异步编程的机制：eventloop 微任务和宏任务

什么是ajax

async JavaScript and xml

这里的异步和js中异步编程不一样。

这里的异步：指的是局部刷新

一个页面无非就是结构、样式、数据和我们实现的交互效果

服务器端渲染

全局刷新：浏览器拿到的就已经是有数据有结构的页面，浏览器只是渲染。

缺点：性能和体验比较差，服务器压力大

优点：

1. 页面呈现速度快，没有所谓的加载，一次性拿到页面

2. 有利于SEO搜索

客户端渲染

1. 客户的使用体验会更好，减轻了服务器的压力

2. 能实现数据的分批获取

所以当代项目开发的架构模型：

纯服务器渲染的；

混排模式：

+骨架屏 首屏内容为服务器渲染。

xml和json格式

HTML：超文本标记语言

XML：可扩展标记语言。用自己自定义标签来存储数据，在真实项目中的应用就是来存储数据的。比如xml配置环境，那些信息就是你们配置的数据。用xml来存储数据有自己的好处。

<?xml version="1.0" encoding="utf-8"?>
<root>
    <student>
        <name>angela</name>
        <age>18</age>
        <sex>1</sex>
        <score>
            <english>100</english>
        </score>
    </student>
    <student>
        <name>Tom</name>
        <age>18</age>
        <sex>1</sex>
        <score>
            <english>100</english>
        </score>
    </student>


</root>
</xml>

优点：层级非常清晰

缺点：

比如我要获取第1个student的score，我要student.score.englist，操作xml文档那种方式去获取，操作起来比较麻烦；

体积偏大，数据量偏大；

跟json的对比：

[
    {
        "name":"angela",
        "age":18,
        "score":{
        "english":100,
        },
]

ajax四步操作

1. 首先创建xhr实例，XMLHttpRequest语义：通过HttpRequest得到XML

2. 配置请求信息

method

url

async

user-name

user-pass：服务器有可能去做域的判断，qq.com就正常返回，baidu.com就返回401

1. 基于ajax拿到服务器返回的结果，监听状态改变

2. 发送请求 xhr.send()

const xhr=new XMLHttpRequest();
xhr.open('GET','xxx');
xhr.onreadystatechange=function(){
    if(xhr.readyState===4 && /^(2|3)\d{2}&/.test.xhr.status){
        // xxx
        let result=xhr.responseText;
    }
}
xhr.send();

http请求方式

get/post

get：从服务器获取内容

post：向服务器推送内容

get：拿得多，给得少

post：给得多，拿得少。我想服务器发送一堆东西，它告诉我好还是不好

get：

• get 获取内容

• delete 告诉点服务器删除点东西

• head 只需要返回响应头，不需要响应体。

• options 试探性请求。

post：

• post

• put 和delete对应。一般用于文件和大型数据

客户端《=》服务器

本质区别

是传递给服务器信息的方式的区别

get：query问号传参

post：body请求主体

请求头中经常放特殊信息。

1. 从机制上：url有大小限制

比如IE是2KB，一个字母是一个B。只能有2000多个字符，超过就截断了。

1. get会产生缓存：

加random或时间戳

1. get相比较post来说不安全：

别人能劫持url信息获取并篡改，相对来说body不容易被劫持；

所以，

如果你要考虑安全，那么一定是post；

不考虑安全，就看给得多还是拿得多

ajax状态码

tip:打开html要保证是http/https协议，而不要是文件协议。

1. unsent: 0

2. opened: 1

3. headers_received: 2

响应头信息已经返回给客户端。服务器依次返回响应头->响应主体。

头的东西少

头里面有很多有意思的东西：

date: 服务器把响应头返回的那一刻的时间

etag: 协商缓存弱缓存

last-modified: 304缓存

cache-control: 强缓存

connection: keep-alive长连接

1. loading: 3 等待服务器返回响应主体

2. done: 4 响应主体已返回

插一句：对象+数字，对象先转换成数字，在过程中先转成字符串

new Date(): 转换成中国标准时间。(若在纽约那就是纽约标准时间，通过网段等信息)

服务器返回：

json不仅更加轻量级，更好操作更加清晰明了能看出结构

服务器返回给客户端的结果一般都是字符串，json格式字符串、html格式字符串、css格式字符串，……一般都是不同格式的字符串；当然也会返回流文件。response都能接收。

const xhr=new XMLHttpRequest();
console.log(xhr.readyState);
xhr.open('GET','http://jsrun.net/res/css/img/helloworld_1.jpg');
console.log(xhr.readyState);
xhr.onreadystatechange=function(){
    console.log('==='+xhr.readyState);
    if(!(/^(2|3)\d{2}$/.test(xhr.status))) return;
    if(xhr.readyState===2){
        let serverTime=xhr.getResponseHeader('Date');
        console.log(new Date(serverTime));
    }
    if(xhr.readyState===4){
        console.log('===done')
        // responseXML
        // responseType
        // response
        console.log(xhr.responseText)
        console.log(xhr.responseType)
    }
}
xhr.send();
// console.dir(xhr);

常用属性

readyState：状态码

responsexxx：响应信息

status:http网络状态码

statusText：http网络状态码描述

timeout：设置超时时间。从我发请求到服务器接收到服务器给我，需要一段时间。

const xhr=new XMLHttpRequest();
console.log(xhr.readyState);
xhr.open('GET','http://jsrun.net/res/css/img/helloworld_1.jpg');
console.log(xhr.readyState);
// 超时
xhr.timeout=1;
xhr.onreadystatechange=function(){
    if(xhr.readyState===4){
        // xxx
        // responseXML
        // responseType
        // response
    }
}
xhr.ontimeout=function(){ 
    xhr.abort();
    alert('request timeout');
    
}
xhr.send();
console.dir(xhr);

withCredentials：跨域请求时是否允许携带cookie（证书）

事件

onreadystatechange

ontimeout

方法

open

send

abort

getResponseHeader/getAllResponseHeaders

setRequestHeader('xxx', 'xxx');

overrideMimeType

ajax的同步异步编程

之前的js的同步异步：浏览器是多线程，但是只分配了一个线程来渲染和解析js。所以js是单线程的

ajax的异步：

xhr.send() => 浏览器会开一个新的线程去请求服务器接收数据

这个就是ajax的异步

发送请求后会经历3个状态的改变：

同步：

只有状态码为4时才算任务结束，主线程才有空闲去做其他事情