AJAX学习笔记

2019/4/6启程 2019/4/30整理

 

目录

简介

背景：

AJAX是一套API核心提供的类型：XMLHttpRequest

异步

同步

进程与线程

AJAX封装：

AJAX快捷方法：

AJAX事件：

同源策略

跨域：

---

---

简介

AJAX = Asynchronous JavaScript and XML.

AJAX 是一种用于创建快速动态网页的技术。

AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。

 

dom bom 的API 来操作网页中的文档

 

模板引擎处理响应数据的渲染：

模板引擎：

artTemplate：https://aui.github.io/art-template/

模板引擎实际上就是一个 API，模板引擎有很多种，使用方式大同小异，目的为了可以更容易的将数据渲染到 HTML中

1.选择一个人模板引擎

2.下载模板引擎JS文件

3.引入到页面

4.准备一个模板

5.准备一个数据

6.通过模板引擎JS提供的一个函数将模板和数据整合得到渲染结果HTML

7.将渲染结果的HTML设置到默认元素的innerHTML中

 

浏览器向服务器发送请求：

地址栏输入地址 回车 刷新location.href("?")

特定元素的href或src属性

表单提交

background、import...

 

以上方案很难用代码进行编程（客户端向服务器端发出请求并接收响应：网络编程），而js自身无法进行网络编程， 因为js 并没有提供该api;Ajax是浏览器提供的Api,通过JS调用，实现通过代码控制请求与响应，实现网络编程。

 

背景：

要想拿到服务器 端的数据，js必须进行页面刷新，ajax就是解决这一问题

通过json的方式实现与服务器的数据交互

 

XHR:通过Ajax 发送请求---> 京东

淘宝：web socket

 

Api:是提供某种能力的事物，有输入有输出

Ajax:前端技术

 

AJAX是一套API核心提供的类型：XMLHttpRequest

响应体：JSON

请求报文 响应报文

XML/JSON(现在用JSON多):字符串描述有结构数据

 

涉及到AJAX操作的界面”不可以“使用文件协议访问（file：//）

1.创建XMLHttpRequest对象（安装浏览器）

var xhr=new XMLHttpRequest( );

兼容处理：

var xhr;

if (window.XMLHttpRequest){ // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xhr=new XMLHttpRequest();

}else{ // IE6, IE5 浏览器执行代码

xhr=new ActiveXObject("Microsoft.XMLHTTP");

}

 

2.准备向服务器发送请求（打开浏览器，输入网址）

xhr. open('GET /POST'，url，async);

参数url是服务器上文件的地址; async：true（异步<默认>）或 false（同步）

通过 AJAX，JavaScript 无需等待服务器的响应（异步），而是：

在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理。

 

在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

3.开始请求

xhr.send();

将请求发送到服务器。 参数string：仅用于 POST 请求

4.等待响应

响应需要时间，无法通过返回值的方式返回响应内容

客户端永远不知道服务器端何时才能返回我们需要的响应

AJAX API采用时间的机制

xhr.onreadystatechange=function(){}

 

Note：

注册事件的时候尽量少的使用on..，容易覆盖，建议使用addEventListenner(" "，function( ){ });该事件不是响应的时候触发，是xhr 状态改变才触发

如果需要捕获第一个状态的变化，需要注意代码执行顺序的问题（不要出现来不及的状态）

responseText 获取服务端响应内容（响应体）

 

readyState:

0: 初始化 请求代理对象

1：open()方法已经调用 建立与服务器端特定端口的链接

2：已经接收到了响应报文的响应头 (注意：可以拿到头，但还拿不到体)

3：正在请求响应报文的响应体，有可能不完整（不可靠）

4：可拿到整个响应报文，请求已完成，且响应已就绪

status：

200: "OK"

404: 未找到页面

 

5.查看结果

 

onload是H5提供的XMLHttpRequest version 2.0定义的

 

向请求添加 HTTP 头:

setRequestHeader(header,value);

header: 规定头的名称 value: 规定头的值

 

eg.

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

 

请求头的Content-type应该跟随着请求体的格式的变化而变化:

Content-Type:application/x-www-form-urlencoded

post:Form Data

 

Content-Type:text/plain

上传文件：Request Payload

 

JSON序列化:json_encode

unicode字符

 

open()可传入第三个参数bool，默认TRUE (异步)

同步：在执行AJAX会产生阻塞（等待请求响应的过程全部完成再继续）

区别：send()会不会出现等待响应情况

异步:

console.time():启动秒表

//代码

计算中间代码执行时间

console.log（）；结束该秒表

 

this.responseXML专门用于回去服务端返回的XML数据，操作方式就是通过DOM的方式，但需要服务器端响应头的Content-Type必须是application/xml

 

不管服务器端采用的是XML还是JSON 本质上都是将数据返回给客户端

服务器端应该设置合理的Content-Type

 

进程：运行中的程序

 

线程：就是拿着剧本（代码）去演戏的演员

CPU 最小执行单元

 

多线程技术

 

 

XMLHttpRequest 在老版本浏览器（IE5/6）中有兼容问题，可以通过另外一种方式代替：

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'）

 

异步

console.log('before ajax');

var xhr = new XMLHttpRequest();

xhr.open('GET', './time.php', true);

xhr.send();

xhr.onreadystatechange = function () {

if (this.readyState === 4) {

console.log('request done');

}

};

console.log('after ajax');

同步

console.log('before Ajax');

var xhr1 = new XMLHttpRequest();

xhr1.open('GET','./time.php',false);

xhr1.onreadystatechange=function(){

if(this.readyState===4){

console.log('request done');

}

};

xhr1.send();

console.log('after ajax');

同步方式 执行需要 先注册事件再调用 send（阻塞），否则 readystatechange 无法触发

 

method http/1.1 状态码200 状态描述ok 响应头 响应体

responseType():告诉请求代理对象需要请求的数据类型

 

获取文本内容：

response（IE10+）和responseText

response获取渠道的结果会根据responseText的变化而变化

responseText永远获取的是字符串形势的响应体

 

进程与线程

      进程：进行中的程序

      进程是资源（CPU、内存等）分配的基本单位，它是程序执行时的一个实例。程序运行时系统就会创建一个进程，并为它分配资源，然后把该进程放入进程就绪队列，进程调度器选中它的时候就会为它分配CPU时间，程序开始真正运行。

      线程：

    线程是程序执行时的最小单位，它是进程的一个执行流，是CPU调度和分派的基本单位，一个进程可以由很多个线程组成，线程间共享进程的所有资源，每个线程有自己的堆栈和局部变量。线程由CPU独立调度执行，在多CPU环境下就允许多个线程同时运行。同样多线程也可以实现并发操作，每个请求分配一个线程来处理。

线程和进程区别和优劣

• 进程是资源分配的最小单位，线程是程序执行的最小单位。

• 进程有自己的独立地址空间，每启动一个进程，系统就会为它分配地址空间，建立数据表来维护代码段、堆栈段和数据段，这种操作非常昂贵。而线程是共享进程中的数据的，使用相同的地址空间，因此CPU切换一个线程的花费远比进程要小很多，同时创建一个线程的开销也比进程要小很多。

• 线程之间的通信更方便，同一进程下的线程共享全局变量、静态变量等数据，而进程之间的通信需要以通信的方式（IPC)进行。不过如何处理好同步与互斥是编写多线程程序的难点。

• 但是多进程程序更健壮，多线程程序只要有一个线程死掉，整个进程也死掉了，而一个进程死掉并不会对另外一个进程造成影响，因为进程有自己独立的地址空间。

 

AJAX封装：

方法：

1、写一个相对完善的用例；

2、写一个空的函数，没有形参，将用例直接作为函数的函数体；

3、根据使用过程中的需求优化参数

 

JQuery中的AJAX:

封装：

1.引入Jquery库；

2.最基础调用

 

$ajax('url',{

type:method，

success:function(res){ //请求成功返回的回调函数

console.log(res);

}

})

 

$.ajax({

url:

type:method

data: {} //设置的是请求参数

beforeSend：function（）{

//

}

success:function(res){

//res会自动根据服务器相应的content-type自动转化为对象

//只有请求成功（状态码为200）才执行这个函数

console.log(res)

}，

error:function(xhr){// 请求不正常（状态码不为200）才执行

console.log('error',xhr)

}

complete:function(xhr){//不论成功还是失败都会执行


}

})

 

dataType:用于设置响应体的类型（与data无关

json:自动转化为对象

一旦设置了dataType,就不再关心服务器端响应的Content-type

 

AJAX快捷方法：

jQuery.get() ：使用一个HTTP GET请求从服务器加载数据。

$.get(URL,data,function(data,status,xhr),dataType)

url    类型: String   一个包含发送请求的URL字符串

data    类型: PlainObject, String    发送给服务器的字符串或Key/value键值对。

success(data, textStatus, jqXHR)     类型: Function()    当请求成功后执行的回调函数。

dataType   类型: String   从服务器返回的预期的数据类型。默认：智能猜测（xml, json, script, 或 html）。

 

$(selector).post(URL,data,function(data,status,xhr),dataType)

$(selector).getJSON(url,data,success(data,status,xhr))

url 必需。规定将请求发送到哪个 URL。

data 可选。规定发送到服务器的数据。

success(data,status,xhr) 可选。规定当请求成功时运行的函数。

额外的参数：

data - 包含从服务器返回的数据

status - 包含请求的状态

（"success"、"notmodified"、"error"、"timeout"、"parsererror"）

xhr - 包含 XMLHttpRequest 对象

 

 

点击左侧导航栏 右侧进行局部刷新

用AJAX来实现：

入口函数目的：

1.有一个独立的作用域

2.确保页面在加载完成执行

 

AJAX事件：

.ajaxStart()

当首个 Ajax 请求完成开始时注册要调用的处理程序

.ajaxStop()

当所有 Ajax 请求完成时注册要调用的处理程序

 

实例：AJAX实现左侧导航栏改变右侧内容局部更新

 

同源策略

浏览器的一种安全策略，同源是指域名，协议，端口完全相同，只有同源的地址才可以相互通过 AJAX 的方式请求。

同源或者不同源说的是两个地址之间的关系，不同源地址之间请求我们称之为跨域请求

 

跨域：

1.JSONP

JSONP 需要服务端配合，服务端按照客户端的要求返回一段 JavaScript 调用客户端的函数

但只能发送 GET 请求

注意：JSONP 用的是 script 标签，跟 AJAX 提供的 XMLHttpRequest 没有任何关系！！！

jQuery 中使用 JSONP 就是将 dataType 设置为 jsonp

 

2.CORS

在服务器中允许远端访问

header('Access‐Control‐Allow‐Origin: *');