什么是ajax?

async javastctip and xml,异步的js和xml

xml:可扩展的标记语言

作用是通过存储数据的(通过自己扩展的标记名称清晰的展示出来数据结构)

ajax值所以称为异步的js和xml,主要原因是:当初最开始用ajax实现客户端和服务器端数据通信的时候,传输的数据格式一般都是xml格式的数据,我们把他们称为异步js和xml(现在一般都是基于json格式进行数据传输)

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version='1.0' encoding='UTF-8'?>
<root>
<student>
<name>张三</name>
<age>25</age>
<score>
<english>90</english>
<math>90</math>
<chinese>90</chinese>
</score>
</student>
</root>

异步的js

这里的异步不是ajax只能基于异步进行请求(虽然建议都是使用异步变成),这里的异步特指的是局部刷新

局部刷新 vs 全局刷新

在非完全前后端分离项目中,前端开发只需要完成页面的制作,并且把一些基础的人机交互效果使用js完成即可,页面中需要动态呈现内容的部分,都是交给后台开发工程师做数据绑定和基于服务器进行渲染的(服务器端渲染)

[优势]

  • 动态展示的数据在页面的原代码中可以看见,有利于seo优化推广(有利于搜索引擎的收录和抓取)
  • 从服务器获取的结构就已经是最后要呈现的结果了,不需要客户端做额外的事情,所以也没加速快(前提是服务器端处理的速度够快,能够处理过来),所以类似于京东、淘宝这些网站,首屏数据一般都是由服务器渲染的

[弊端]

  • 实时更新的数据,每一次想要展示最新的数据,页面都要重新的刷新一次,这样肯定不行
  • 都交给服务器端做数据渲染,服务器端的压力太大,如果服务器处理不过来,页面呈现的速度更慢(所以京东、淘宝这类网站,除了首屏是服务器端渲染的,其他屏一般都是客户端做数据渲染绑定)
  • 这种模式不利于开发(开发效率低)

image.png

目前市场上大部分项目都是前后端完全分离的项目(也有非完全前后端分离的)

前后端完全分离

前后端完全分离的项目,页面中需要动态绑定的数据是交给客户端完全渲染的

  • 想服务器端发送ajax请求
  • 把从服务器端获取的数据解析处理,拼接成为我们需要展示的html字符串
  • 把拼接好的字符串替换页面中某一部分的内容(局部刷新),页面整体不需要重新加载,局部渲染极客

[优势]

  • 我们可以根据需求,任意修改页面中某一部分的内容(例如实时刷新),整体页面不刷新,性能好,体验好(所有表单验证,需要实时刷新的等需求都要基于ajax实现)
  • 有利于开发,提高开发的效率
    • 前后端的完全分离,后台不需要考虑前端如何实现,前端也不需要考虑后台用什么技术,真正意义上实现了技术的划分
    • 可以同时进行开发:项目开发开始,首先制定前后端数据交互的结构文档(文档中包含了,调用哪个接口或者那些数据等协议规范),后台吧接口线写好(目前很多公司也需要前端自己拿node来模拟这些接口),客户端按照接口调取极客,后端再去实现接口功能极客

[弊端]

  • 不利于seo优化:第一次从服务器端获取的内容不包含需要动态绑定的数据,所以也没的原代码中没有这些内容,不利于seo收录,后期听过js添加到页面中的内容,并不会写在页面的源代码中(是源代码不是页面结构)
  • 交由客户端渲染,首先需要把页面呈现,然后通过js的异步ajax请求获取数据,然后数据绑定,浏览器在动态增加部分重新渲染,无形中浪费了一些时间,没有服务器端渲染页面呈现速度快

image.png

ajax请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let xhr = new XMLHttpRequest();
// 不兼容ie6以及更低版本的浏览器(ie6 activeXobject)

// 打开请求地址(可以理解为一些基础配置,但是并没有发送请求呢)
xhr.open([method],[url],[async],[username],[user password]);

// 监听ajax改变,获取响应信息(获取响应头信息,获取响应主体信息)
xhr.onreadystatechange=()=>{
if(xhr.readyState===4 && xhr.readyState===200){
let result = xhr.responseText;// 获取响应主体中的内容
}
}

// 发送ajax请求(括号中传递的信息内容是请求主体的内容)

xhr.send(null)


分析第二部分的细节点

1
xhr.open([method],[url],[async],[username],[user password]);

ajax请求方式(method)

get系列的请求

  • get

  • delete

  • head

  • post系列的请求(推送)

  • post

  • put:想服务器中增加指定的资源文件

不管哪一种请求方式,客户端可以吧信息传递给服务器,服务器也可以吧信息返回给客户端,只要get系列一般以获取为主(给的少)

  1. 我们想获取一些动态展示的信息,一般使用GET请求,因为只需要向服务器发送请求,告诉服务器端想要什么,服务器端就会把需要的数据返回
  2. 在实现注册功的时候,我们需要把客户端输入信息发送给服务器进行存储,服务器一般返回成功是成功等状态,此时我们一般都基于post请求完成
  3. ….

get系列请求和post系列请求,在项目是在中存在很多的区别

  1. get请求传递给服务器的内容一般贸易post请求传递给服务器的内容多

    1. 原因:get请求传递给服务器内容一般都是基于url地址问号传递参数 来实现的,而实现的,而post请求一般都是基于设置请求主体来实现的。浏览器都已自己的关于url的最大长度限制(谷歌:8kb、火狐:7kb、ie:2kb)超过限制长度的部分,浏览器会自动截取掉,导致传递给服务器的数据缺失
    2. 理论上post请求通过主体传递是没有大小限制,真实项目中为了保证传输的速度,我们会限制大小(例如:上传的资料或者图片我们会做大小的限制)
  2. get请求容易出现缓存(这个缓存不可控:一般我们都不需要),而post不会出现缓存(除非自己做特殊处理)

    1. 原因:get是通过url问号传参传递给服务器信息,二post是设置请求主体
    2. 设置请求主体不会出现缓存,但是url传递参数就会了

    3. 1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      setTimeout(()=>{
      $.ajax({
      url:'getList?lx=news',
      success:result=>{
      // 第一次请求数据回来,间隔一分钟后,浏览器又发送一次请求,
      // 但是新发送,不管是地址还是传递的参数都和第一次不一样,
      // 浏览器很有可能会把上一次数据获取,而不是获取新的数据
      }
      });
      },60000)

      // 解决方案:每一次重新请求的时候,在URL的末尾追加一个随机数,保证每一次请求的地址不完全一直
      // 就可以避免是从缓存中读取的数据

      setTimeout(()=>{
      url:'getList?lx=news_='+Math.random()
      success:result=>{

      }
      })
  3. GET请求没有post请求安全(post也并不是十分安全,只是相对安全)
    原因:还是因为get是url传递给服务器有一种比较简单的黑客技术:url劫持,也就是可以客户端传递给服务器劫持掉,导致信息泄露

2.4.2 url

请求数据的地址(api地址),真实项目中,后台开发工程师会编写一个api文档,在api文档中汇总了获取那些数据需要使用哪些地址,我们按照文档操作即可

2.4.3 async

异步(sync同步),设置当前ajax请求是异步还是同步的,不写默认是异步(true),如果设置false,则代表当前请求是同步的

用户名和密码这两个参数一般不用,如果你请求的url地址所在服务器设定了访问权限,则需要我们提供通行的用户名和密码才可以(一般服务器都可以允许匿名访问的)

AJAX状态码

xhr.readyState

  1. unsent 未发送,只要创建一个ajax对象,默认值是零
  2. opened 我们已经执行了xhr,open这个操作
  3. headers_resceived 当前ajax的请求已经发送,并且已经接收到服务器端返回的响应头信息了
  4. loading 响应主体内容正在返回的路上
  5. done 响应主体内容已经返回到客户端

HTTP网络状态码

记录了当前服务器返回信息的状态

xhr.status

  • 200成功,一个完整的http事务完成了(以2开头的状态码一般性都是成功)
  • 3开头一般也是成功,只不过是服务器做了特殊的处理
    • 301 moved permanently 永久转移(永久重定向)
    • 302 move temporarily 临时转移(临时重定向,新的http版本中任务307是临时重定向)
      • 一般用于服务器的负载均衡:当前服务器处理不了,我把当前请求临时交给其他的服务器处理(一般图片请求经常出现302,很多公司都有单独的图片服务器)
    • 304 not modified 从浏览器缓存中获取数据
      • 把一些不经常更新的文件或者内容缓存到浏览器中,下一次从缓存中获取,减轻服务器压力,也提高页面加载的速度
  • 4开头的,一般性都是失败的,而且客户端的问题偏大
    • 400:请求参数错误
    • 401:无权限访问
    • 404:访问地址不存在
  • 5开头的,一般都是失败,而且服务器的问题偏大
    • 500:internal Server Error 未知的服务器错误
    • 503:Service Unavailable 服务器超负债

面试题 ajax中总共支持几个方法
let xhr = new xmlHttpReques();
console.dir(xhr);

[属性]
readyState:存储的是当前ajax的状态
response/responseText/responseXML : 都是用来接收服务器返回的响应主体的内容,只是更具服务器返回内容的格式不一样,我们使用不同的属性接收即可
responseText是最常见的,接收到结果是字符串格式的(一般服务器返回的数据都是json格式字符串)
responXML:偶尔会用到,如果服务器返回的是xml文档数据,我们需要使用这个属性接收
status:记录了服务器返回的http状态码
statusText:对返回状态码的描述
timeout:设置当前ajax请求的超时时间,假设我们设置时间为3000(MS),从AJAX请求发送开始,3秒后响应主体内容还没有返回,浏览器会把当前ajax请求强行断开

[方法]
abor():强行终端ajax请求
getAllResponseHeaders():获取全部的响应头信息(获取的结果是一丢字符串文本)
getResponseHeader(key):获取指定属性名的响应头部信息,例如:xhr.getResponseHeader(‘data’)获取响应头中存储的服务的时间
open():打开一个url地址
overridMimeType():重写数据的MIME类型
send():发送ajax请求(括号中书写的内容是客户端请求主体吧信息传递给服务器)
setRequestHeader(key,value):设置请求头信息(可以是设置自定义请求信息)

[事件]
onabort:当ajax被终端请求触发这个时间
onreadstatechange:ajax状态发烧改变,会触发这个事件
ontimeout:当AJAX请求超时,会触发这个事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
let xhr = new XMLHttpRequest(();
xhr.open('get','temp.json?_='+Math.random(),true);
xhr.setRequesHeader('cookie','xxx'); // => 设置请求内容不能出现中文汉字
xhr.timeout = 10;
xhr.ontimeout=()=>{
console.log('当前请求已经超时');
xhr.abort();
}

xhr.onreadystatechange = () =>{
let {readyState:state,status} = xhr;

// 说明请求数据成功了
if(!/^(2|3)\d{2}$/.test(status)) return

// 在状态为2的时候就获取响应头信息
if(state === 2){
let headerAll = xhr.getAllResponseHeaders(),
serverDate = xhr.getResponseHeader('date');// 获取的服务时间是格林尼治时间(相比北京时间差不多差8小时)
console.log(headerAll,new Date(serverDate));
return;
}

// 在状态为4的时候就获取响应头信息已经回来了
if(state === 4){
let valueText = xhr.responseText,// 获取到的结果一般都是json字符串(可以时间json.parse把其转换成json对象)
valueXML = xhr.responseXML; // 获取到的结果是xml格式的数据,(可以通过xml的一些常规操作获取存储的指定信息)
// 如果服务器返回的是xml文档,responseText获取的结果是字符串,而responseXML获取的是标准xml文档
console.log(valueText,valueXML);
}

}

xhr.send('name=wjw&age=23&sex=man')

AJAX中的同步和异步编程

1
2
3
4
5
6
7
let xhr = new XMLHttpRequest();
xhr.open('get','temp.json',false);
xhr.onredystatechange=()=>{
console.log(xhr.readySate);
}
xhr.send();
// 只输出一次结果4

image.png

1
2
3
4
5
6
7
8
9
10
let xhr = new XMLHttpRequest();
xhr.open('get','temp.json',false);
xhr.send();// => 同步开始发送ajax请求,开启ajax任务,在任务没有完成之前,什么事情都做不了
// 下面绑定时间也做不了 => loading => 当readyState ===4 的是ajax任务完成,开始执行下面的操作
xhr.onreadystatechange=()=>{
console.log(xhr.readySate);
}
// 绑定方法之前状态已经为4了,此时ajax的状态不会再改吧其他值,所以事件永远不会被处罚
// 一次都没有执行方法(使用ajax同步编程,不要把send放在事件监听前
// 这样我们无法在绑定方法中获取响应主体的内容)

image.png

let xhr = new XMLHttpRequest();

// 下面绑定时间也做不了 => loading => 当readyState ===4 的是ajax任务完成,开始执行下面的操作
xhr.onreadystatechange=()=>{
    console.log(xhr.readySate);
  if(xhr.readySate===1) {
      xhr.setRequestHeader('aaa','bbb');
  }
}

xhr.open('get','temp.json',false);
// xhr.readyState === 1 AJAX特殊处理的一件事:执行OPEN状态变为1,会主动把之前监听的方法执行一次
// 然后再去执行SEND

xhr.send();
// xhr.redayState === 4 AJAX任务借宿,主任务队列完成

AJAX类库的封装

JQ中的AJAX

url

请求api地址

method

请求方法get/post..在老板的jq中使用是type,使用type和method相同效果

dataType

dataType只是我们预设获取结果的类型不会影响服务器的返回(服务器端一般给我们返回的都是json格式的字符串),如果我们预设是json,那么类库中将吧服务器返回的字符串转换为json对象,如果我们预设是text(默认值),我们把服务器获取的结果直接拿过来操作即可,我们预设的值还可以xml等

cache

设置是否清楚缓存,只对get系列请求有作用,默认是true不清除缓存,手动设置false,jq类库在请求url的末尾最佳一个随机数来清楚缓存

data

我们通过data可以把一些信息传递给服务器,get系列请求会把data中的内容拼接在url的末尾通过问号传参的方式给服务器,post系列请求会把内容请求放在主题传递给服务器;data的值可以设置为两种格式,字符串、对象,如果是字符串,设置的值是传递给服务器的就是什么,如果设置成对象,jq会把对象变为xxx=xxx&xx=xx,这样来数据传递

async

设置同步或者异步,默认是true代表异步,false代表同步

success

dangajax请求成功后redayState===4&&statue是以2或者3开头的
请求成功后jq会把传递的回调函数执行,并且获取的结果当做实参传递给回调函数(result就是我们从服务器获取的结果)

error

请求错误触发回调函数

complate

不管请求还是错误的还是正确的都会触发这个回调函数(他就是完成的意思)

….

封装自己的AJAX库

  • url
  • method/type
  • data
  • dataType
  • async
  • cache
  • success

~funcction(){

    class ajaxClass {
        // send ajax
        init() {
            let xhr = new XMLHttpRequest();
            xhr.onreadustatechange = () => {
                if (!/^[23]\d{2}$/.test(xhr.status)) return;
                if (xhr.redayState === 4) {
                    let result = xhr.responseText;
                    //    DATA-TYPE
                    switch (this.dataType.toUpperCase()) {
                        case 'TEXT':
                            break;
                        case 'JSON':
                            result = JSON.parese(result);
                            break;
                        case 'XML':
                            result = xhr.responseXML;
                            break;
                    }
                    this.success(result);
                }
            }
            // DATA
            if (this.data !==null) {
                this.formatData();
                if (this.idGET) {
                    this.url +=this.querySymbol()+this.data;
                    this.data = null;
                }
            }
            // CACHE
            this.isGET ? this.cache();
            xhr.open(this.method, this.url, this.async);
            xhr.send();
        }

        cacheFn() {
            // THIS:EXAMPLE
            !this.cache ? this.url += `${this.querySymbol()}_=${Math.random()}` : null;
        }

        querySymbol() {
            // THIS:EXAMPLE
            return this.url.indexOf('?') > -1 ? '&' : '?';
        }

        formatData(){
             // THIS:EXAMPLE
             if(Object.prototype.toString.call(this.data)==='[Object Object]'){
                 let obj = this.data,
                     str = ``;
                     for (const key in obj) {
                         if (object.hasOwnProperty(key)) {
                          str +=`${key}=${obj[key]}`; 
                         }
                     }
                str = str.replace(/&$/g,'');
                this.data = str;
             }
        }
    }
    let ajax = function () {};
    // init parameters
    window.ajax = function ({
        url = null,
        method = 'GET',
        type = 'GET',
        data = null,
        dataType = 'JSON',
        cache = true,
        async = ture,
        suceess = null
    } = {}) {
        let _this = new ajaxClass(); // 创建实例
        ['url', 'method','data','dataType','cache','async','success'].forEach((item)=>{
            if (item === 'method') {
                _this.method = type === null ? method : type;
                return;
            }
            if (item==='success') {
                 _this.suceess = typeof success === 'function' ? success : new Function();
            }
            _this[item] = eval(item);
        })
        _this.isGET = /^(GET|DELETE|HEAD)$/i.test(example.method);
        _this.init();
        return _this;
    };
}();
ajax({})