AJAX学习笔记-CSDN博客

本文链接：https://blog.csdn.net/weixin_41082623/article/details/90452036

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

简介

背景：

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

简介

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