Ajax(全)

JSON

简介：JSON（JavaScript Object Notation）以纯文本结构组织所要传送的数据，数据内容包括字符串、数字、数组和对象等，由于JSON易读以及纯文本格式的特性，可以非常容易地与其他程序进行沟通与数据交换。
JSON 文件的文件类型是 ".json"

格式： JSON的数据结构通过大括号、中括号、逗号和冒号来组织数据，因此我们从这四种符号切入，带大家伙认识JSON数据。

“键：值” "key:value"

对象：大括号内代表的是“对象（object)”，对象代表的是一系列“键：值”的集合

数组： 中括号内代表的是“数组（array)”。数组内可以存放数字、文字、布尔值、数组、对象等变量，无论是同时存放同一种性质的变量，或是混合使用都可以，同样以逗号隔开每个变量。
然而与对象不同的地方，数组内以逗号隔开的部分无法放入“键：值”的格式。

遍历JSON： for in
JSON字符串转换为JSON对象：
JSON字符串: var str1 = '{ "name": "cxh", "sex": "man" }';
var obj = eval('(' + str + ')');//由JSON字符串转换为JSON对象
或者
var obj = JSON.parse(str); //由JSON字符串转换为JSON对象(常用)
将JSON对象转化为JSON字符串：
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

ajax

什么是ajax?是Asynchronous JavaScript+XML的简写。ajax技术核心是XMLHttpRequest对象（简称XHR）

IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR对象，在这些浏览器中创建XHR对象可以直接实例化XMLHttpRequest即可。
var xhr = new XMLHttpRequest();
alert(xhr);

XMLHttpRequest

我们与服务器通信的API就是XMLHttpRequest。
那么我们都需要那些步骤来通信呢，简单理解一共只有4步。
1、新建XMLHttpRequest对象
var request=new XMLHttpRequest();
IE 7以下 var request=new ActiveXObject("Microsoft.XMLHTTP");（兼容）
2、打开要发送的地址通道。
request.open(“GET”,地址，同步/异步)；
3、给XMLHttpRequest对象增加侦听器，用来侦听各种情况，包括各种链接状态
request.addEventListener(“load”,侦听函数)发送数据给打开的地址，

4、如果没有要发送的内容直接send（）

request.send();

open

Open方法的参数主要包括
   DOMString method,
   DOMString url,
   optional boolean async,
   optional DOMString user,
   optional DOMString password

数据提交给服务器有两种方式，

第一种是表单提交，通过表单submit触发，提交到form中action属性地址，使用的方法是method给出的

这种方式有个缺陷,需要跳转页面

使用submit大多数都是静态页面，更容易增加一些挂见此，用于网页的搜索，也就是SEO的引擎优化，所以所有想要被搜索到的东西都需要写Html，在JavaScript里面的内容都不能被搜索到。

第二种是通过ajax提交的,就不能触发submit,而是通过按钮点击,直接使用ajax发送给服务端

发送到的地址就是open中的第二个参数,发送方法就是open的第一个参数

不需要跳转页面,缺陷,部分内容无法进行SEO优化

以上两种情况只能二选一

在两种提交方式中，都会有一个东西叫method

GET/POST/PUT/DELETE

GET 通过地址栏后面?带入字符串,字符串格式是变量=值&变量=值的方式传递数据给服务器

这种方式仅仅去服务端获取，没有单独传递数据，并且从服务端获取需要内容，这个就是GET

传递给服务器的数据少，而且是明文传递，只能使用字符串，并且数据无法进行多样性嵌套

如果地址是当前页面锚点是可以提交提交页面

POST 数据不是通过地址栏发送，通过数据握手后信道发送数据，并且会将数据转换为二进制数据发送

给服务器，传送数据可以是任意复杂度数据，但是传送的数据类型，包含了字符串，二进制流其他一些格式

PUT DELETE 前端直接操作数据库，非常危险的

open(method,url,async,userName,password);

method GET/POST/PUT/DELETE

URL 表示发送的地址，如果是GET方式，可以在地址后面增？参数=值传递数据

如果地址是http协议的，如果需要端口号必须加上端口号。
url地址是一个比较强大的内容，如果给服务器传参不需要加密的话，可以通过url来进行传参，通常传参的方法是http://地址：端口/文件名？参数1=值1&参数2=值2

open的第三个参数是async 异步,默认是true,默认是异步返回数据,如果设置为false,表示同步等待

一个可选的布尔值参数，默认为true,意味着是否执行异步操作，如果值为false,则send()方法不会返回任何东西，直到接受到了服务器的返回数据。如果为值为true，一个对开发者透明的通知会发送到相关的事件监听者。这个值必须是true,如果multipart 属性是true，否则将会出现一个意外。

open的第四个和第五个参数是用户名和密码,有些地址访问是需要用户名和密码

http头部

HTTP客户程序（例如浏览器），向服务器发送请求的时候必须指明请求类型（一般是GET或者POST）。如有必要，客户程序还可以选择发送其他的请求头。大多数请求头并不是必需的，但Content-Length除外。对于POST请求来说Content-Length必须出现。请通过百度等搜索引擎搜索该内容学习。这部分内容在以后实际应用中有很多是需要使用的。
xhr.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”)
getResponseHeader获取头部指定的属性值
getAllResponseHeaders 获取所有头部属性
setRequestHeader 设置头部属性，必须在open以后，send以前写入

ajax提交举例如下：

var xhr=new XMLHttpRequest();

xhr.addEventListener("load",loadHandler);

xhr.open("GET","http://localhost:4010/a.php?user=wjs");

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

xhr.send("user=wjs");

function loadHander(e){

console.log(this.response);

}

以上例子

遇到的问题：跨域

使用表单提交时，是跳转页面，跳转就不需要考虑回来的问题，所以不牵扯跨域

但是ajax是访问别的网站并且将数据取回，这就需要考虑跨域问题

在nodejs中解决跨域问题是使用响应头

那么在php中也有响应头，php中的响应头是header,只需在php中添加

header("Access-Control-Allow-Origin:*");即可

那么php就变成了

<?php

// php写入允许跨域的响应头

header("Access-Control-Allow-Origin:*");//地址 Ip 端口号

echo $_REQUEST['user'];//REQUEST是$_GET和$_POST都能

这样就完成了与php的get方式的发送内容

特别注意的是要使用post向php发送请求必须加上一段话

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

设置请求头如果前端需要通过POST发送数据给php页面,就需要写这个请求头,给nodejs服务发送POST请求时不用写

这个请求头必须写在open之后,send之前（***重要）

综上提交，应该意识到提交时应该注意以下四点：

1、表单提交还是ajax发送,表单不需要跨域,ajax需要考虑跨域

2、使用GET还是使用POST,数据发送的形式不同,一个是地址后缀,一个是send发送

3、如果使用POST,是发送给NodeJs还是发送给PHP,服务器语言不同,处理方式不同

4、AJAX--->POST--->PHP 需要写请求头xhr.setRequestHeader

Network中的XHR 可以看到各种ajax的所有请求

本地数据的加载问题：

请求本地数据 AJAX不单纯可以请求服务器数据,还可以请求本地数据

本地文件：

a.txt文件

1234567890

请求a.txt文件，把a.txt中的内容加载到div中

var xhr=new XMLHttpRequest();

xhr.addEventListener("load",loadHandler);

xhr.open("GET","./a.txt");

xhr.send();

function loadHandler(e){

var div=document.querySelector("div");

div.textContent=this.response;

}

</script>

同理，也可以把config.json文件加载到里面

config.json文件

{

"backgroundColor":"blue",

"name":"xietian",

"age":30,

"sex":"男",

"st":[

{"name":"张三","id":"1001"},

{"name":"李四","id":"1002"},

{"name":"张三","id":"1003"},

{"name":"张三","id":"1004"}

]

}

var xhr=new XMLHttpRequest();

xhr.addEventListener("load",loadHandler);

xhr.open("GET","./config.json");

xhr.send();

function loadHandler(e){

var obj=JSPN.parse(this.response);

console.log(obj.backgroundColor);

document.documentElement.style.backgroundColor=obj.backgroundColor;

}

</script>

所以通过修改json文件，网页不需要改变就能实现html改变颜色

更新包括两种一种是热更新、一种是冷更新

冷更新：每一次更新时，是将原来有的app都删了，然后从服务器上下最新的app，把最新的app重新安装

热更新：打开app时，是进度条，现在已下载多少更新多少，等更新完成之后

页面就ok了，热更新就是有一个配置文件，然后每一次打开app的时候都先去服务器请求最新的文件，如果服务器上发过来的配置文件和本地配置文件版本号一样就不需要更新，如果版本号不一样就比对这两个版本中需要更新的内容，然后再去服务器请求需要的内容下载到本地就完成了热更新

在开发过程中外部配置是非常重要的，

可以读取外部的json,也可以加载外部的的XML文件

什么是XML呢？html有多个版本，后来过渡到xhtml,这就模仿了XML

XML文件格式如下（是非常自由的，标签名随便取）：

<?xml version="1.0" encoding="utf-8" ?>

<data>

<bk>

</bk>

<sh>

</sh>

</data>

加载外部XML文件

var xhr=new XMLHttpRequest();//XMLHttpRequest最早期就是为了通讯XML文件的

xhr.addEventListener("load",loadHandler);

xhr.open("GET","./a.xml");

xhr.send();

function loadHandler(e){

console.log(xhr.responseXML);

}

那么加载进来有什么用呢？

获取的内容是对应的dom内容，所以可以在这个内容当中获取对应的数据，

例如获取num的结果

那么就是

xml=xhr.responseXML;

var num=xml.getElementsByTagName("num");

console.log(num);

可以获取第0项

xml=xhr.responseXML;

var num=xml.getElementsByTagName("num")[0];

console.log(num);

甚至可以获取它的数据

xml=xhr.responseXML;

var num=xml.getElementsByTagName("num")[0].textContext;

console.log(num);

如果想取到bk里的所有的man的数据

xml=xhr.responseXML;

var bk=xml.getElementsByTagName("bk")[0];

var bk=xml.querySelectorAll("man")//获取所有man

var bk=xml.querySelectorAll("bk>man")//获取bk下的man

var bk=xml.querySelectorAll("bk>man")[0];//获取张三的数据

var bk=xml.querySelectorAll("bk>man")[0];

console.log(bn.getAttribute("name");//获取张三这条数据中的张三

XML 是全语言共通数据

缺陷是数据太大

通信不但可以通信json字符串也可以通信xml,但是不支持将json直接发送给服务器，必须将json转化为字符串才能发送给服务器，而xml是不需要转换为字符串的，是可以直接发送给服务器也可以直接发送给客户端的，综上xml自由度更高

加载图片

var xhr=new XMLHttpRequest();

xhr.addEventListener("load",loadHandler);

xhr.open("GET","./img/2-.jpg");

xhr.send();

function loadHandler(e){

console.log(this.response);

}

加载html

aaa

bbb

var xhr=new XMLHttpRequest();

xhr.addEventListener("load",loadHandler);

xhr.open("GET","./a.html");

xhr.send();

function loadHandler(e){

// console.log(this.response);

var div=document.querySelector("div");

div.innerHTML=this.response;

}

</script>

被加载的html如下：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div{

width: 50px;

height: 50px;

border: 1px solid #000000;

background-color: red;

}

</style>

</head>

<body>

</body>

</html>

同步和异步

异步：

var xhr=new XMLHttpRequest();

xhr.addEventListener("load",loadHandler);

xhr.open("POST","http://localhost:4010/a.php");

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

xhr.send("user=wjs");

console.log("a");

function loadHandler(e){

console.log(this.response);

console.log("b");

}

console.log("c");

打印顺序为acb,是因为通信过程中是需要时间的

那么如何把异步变成同步？

var xhr=new XMLHttpRequest();

// open的第三个参数是async 异步,默认是true,默认是异步返回数据,如果设置为false,表示同步等待

// 禁止大家使用同步功能

xhr.open("POST","http://localhost:4010/a.php",false);

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

xhr.send("user=wjs");

console.log("a");

// 阻塞式同步,等待数据返回后,继续执行

console.log(xhr.response);

console.log("c");

http头部补充

数据有请求头和响应头两部分组成

请求消息：从客户端发送给服务端的消息

请求消息中需要裹挟着一些说明型的数据，让服务端收到后根据这些数据比对和解析

这种数据一般比请求消息更早的发到服务端，服务端就可以解析了，这种数据就是请求头

在ajax中设置请求头通过xhr.setRequestHeader(请求头名，请求头值);

可以写多条语句设置

响应消息：从服务端返回给客户端的消息

举例：

html中

var xhr=new XMLHttpRequest();

xhr.addEventListener("load",loadHandler);

xhr.open("POST","http://localhost:8000");

// 这个是自定义的请求头，如果跨域时，请求头也必须设置允许跨域才可以发送

//也就是服务端必须要加

// "Access-Control-Allow-Headers":"*" 这句话的意思是允许请求头数据跨域

//除此之外，我们一般用data方式发送时，还会多了一个content-length,指的是内容的长度，因为数据在发送的过程中，有的少有的多，如果多的话需要截取数据，截取的时候需要知道从哪到哪

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

xhr.setRequestHeader("dataType","json");//这个叫请求头

// 设置请求头必须写在open和send之间

xhr.send("user=xietian");

function loadHandler(e){

// 获取所有响应头消息

console.log(xhr.getAllResponseHeaders());

// 获取指定的响应头消息

console.log(xhr.getResponseHeader("content-type"));

}

注：

客户端html里面

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");//这个叫客户端设置请求头

xhr.setRequestHeader("dataType","json");//这个叫请求头

function loadHandler(e){

// 获取所有响应头消息

console.log(xhr.getAllResponseHeaders());

// 获取指定的响应头消息

console.log(xhr.getResponseHeader("content-type"));

}//客户端获取响应头

服务端nodejs js里面

1、console.log(req.headers);//这个叫服务端的获取请求头，在nodejs中req.headers就是前端发来的请求头消息

2、res.writeHead(200,{

"content-type":"text/html;charset=utf-8",

"Access-Control-Allow-Origin":"*",

// 允许请求头数据跨域

"Access-Control-Allow-Headers":"*"

})//这个叫服务端设置的响应头

总结：

在客户端中可以设置请求头和获取响应头

在服务端中可以获取请求头和设置响应头

send

发送json字符串

发送的时候可以发送普通字符，也可以发送json字符串

var obj={

user:"wjs",

age:30

}

var xhr=new XMLHttpRequest();

xhr.addEventListener("load",loadHandler);

xhr.open("POST","http://localhost:8000");

xhr.send("user=wjs");

function loadHandler(e){

}

服务器中解析改为用json解析

var obj=JSON.parse(str);

发送时用JSON.stringify来发送

所以当时用send来发送时，就可以利用JSON.parse来解析，于是就可以写入一个对象

那么如何发送呢？将obj对象转换为字符串，然后发送到服务端，然后服务端就将字符串转化为对象

解析了，解析之后再将对象中的age给发回去

启动服务这时发过去的数据也会被存储起来

除了发送字符串数据之外，还可以发送其他类型的数据，包括：

1、void send(ArrayBuffer data);类型化数组

图片
2、void send(Blob data);二进制大对象，是一个可以存储二进制文件的容器。

可以上传blob文件,比如文件提交、上传图片等

举例：

<form>

<input type="file" multiple>//multiple指多选，可以选择多个文件

</form>

var form=document.querySelector("form");

form.addEventListener("submit",submitHandler);

function submitHandler(e){

e.preventDefault();

var file==document.querySelector("[type=file]");

// console.log(file.files);//上传一张图片之后是一个二进制类型的blob数据，可以直接上传给服务器

var xhr=new XMLHttpRequest();

xhr.open("POST","http://localhost:8000");

xhr.addEventListener("load",loadHandler);

xhr.send(file.files[0]);//这样将图片直接发送给服务器了

}

图片直接发送给服务器之后，那么nodejs 里data就不是字符串了，是二进制数据，所以console.log(_data );

然后nodejs再根据上传数据的格式，将二进制数据转化成图片，然后进行保存

解析图片过程就不在这里介绍了

3、void send(Document data); 文档对象

直接发送document或者可以直接将HTML发送给服务器，

var x=new XMLHttpRequest();

x.addEventListener("load",xmlLoadHandler);

x.open("GET","./a.xml");

x.send();

function xmlLoadHandler(){

// console.log(x.responseXML)

var xhr=new XMLHttpRequest();

xhr.addEventListener("load",loadHandler);

xhr.open("POST","http://localhost:8000");

xhr.send(x.responseXML);

}

function loadHandler(){

}

服务器接收字符串‘

str=_data.toString();

console.log(str);

这样就可以将本地的xml加载进来，然后将xml发送到服务器

4、void send(DOMString? data); 文本数据

也可以将DOMString（例如div）发送给服务器

5、void send(FormData data); 数据对象，可以直接封装内容

举例：formData 发送表单数据

一个表单

<form

class="form-horizontal"

action="http://localhost:4010/signUp.php"

method="POST"

<input

type="text"

class="form-control"

id="user"

name="user"

placeholder="User"

</div>

<label for="password" class="col-sm-2 control-label">Password</label>

<input

type="password"

class="form-control"

id="password"

name="password"

placeholder="Password"

</div>

<input

type="text"

class="form-control"

id="name"

name="name"

placeholder="name"

</div>

<input

type="text"

class="form-control"

id="age"

name="age"

placeholder="age"

</div>

<input type="radio" name="sex" id="man" value="男" checked /> 男

</label>

<input type="radio" name="sex" id="women" value="女" /> 女

</label>

</div>

<input

type="text"

class="form-control"

id="tel"

name="tel"

placeholder="tel"

</div>

<label for="email" class="col-sm-2 control-label">email</label>

<input

type="text"

class="form-control"

id="email"

name="email"

placeholder="email"

</div>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</div>

</form>

</div>

var form=document.querySelector("form");

form.addEventListener("submit",submitHandler);

function submitHandler(e){

e.preventDefault();

var fd=new FormData(form);

// for(var values of fd){

// console.log(values);

// }

var xhr=new XMLHttpRequest();

xhr.addEventListener("load",loadHandler);

xhr.open("POST","http://localhost:8000");

// 将这个表单数据提交

xhr.send(fd);//fd数据类型与es6中的map类型相似

}

function loadHandler(e){

}

</script>

表单里的数据通过ajax执行，首先得让表单不发送，通过preventDefault，

如果想让它通过表单发送的话，得需要将input里面的值提出来，然后放在对象中，再将对象转化为字符串，然后发送给服务器，但是这种方式不好，现在通过formData来实现

把form表单塞到new formData当中，然后就能拿到一个数组，但是查找不到，所以对数组进行遍历

,获取到的数据不需要转化为对象或者字符串发出去，直接发送出去就可以。

这样就可以将整个表单出具一次性提交

当然，nodejs里面还需要解析formData,有点麻烦，就不在这里面介绍了

timeout

超时，因为各种因素导致数据前后端传递的延迟

设置超时等待，如果超过这个时间，就切断数据发送

var xhr=new XMLHttpRequest();

xhr.open("POST","http://localhost:8000");

xhr.addEventListener("load",loadHandler);//超时事件，如果触发超时等待就会执行这个操作

xhr.timeout=2000;//设置超时等待2秒

xhr.send("aaa");

function loadHandler(){

}

function timeOutHandler(e){

xhr.abort();//将原来的链接断掉，重新再创建并执行心得xhr的通信

}

readyState

UNSENT
XMLHttpRequest 代理已被创建，但尚未调用 open() 方法。
OPENED
open() 方法已经被触发。在这个状态中，可以通过 setRequestHeader() 方法来设置请求的头部，可以调用 send() 方法来发起请求。
HEADERS_RECEIVED
send() 方法已经被调用，响应头也已经被接收。
LOADING
响应体部分正在被接收。如果 responseType 属性是“text”或空字符串， responseText 将会在载入的过程中拥有部分响应数据。
DONE
请求操作已经完成。这意味着数据传输已经彻底完成或失败。

readystatechange

当一个文档的 readyState 属性发生更改时，readystatechange 事件会被触发。
状态主要分
1、信息 100-101
2、成功 200-206
3、重定向 300-307
4、客户端错误 400-417
5、服务器错误 500-505

状态

load事件以后再使用就是加载本地数据时使用

两种方法都可以

第一种写法：写事件用addEventListener，这种写法不可能造成回调地狱

var xhr=new XMLHttpRequest();

// 在整个AJAX的通信中属于全过程监听，当状态改变时，触发该函数

xhr.addEventListener("readystatechange",readyStateHandler);

xhr.open("POST","http://localhost:8000");

xhr.send("aaa");

function readyStateHandler(e){

console.log(this.readyState,this.status);

if(this.readyState===4 && this.status===200){//发送数据需要在第四步(下载操作已完成)知道，比load多写一个拿到数据的事件

console.log(this.response);

}

第二种写法：写事件用onreadystatechange，很容易造成回调地狱，所以用Promise

function ajax(data){

return new Promise(function(resolve,reject){

var xhr=new XMLHttpRequest();

xhr.onreadystatechange=function(){

if(xhr.readyState===4){

if(xhr.status===200){

resolve(xhr.response);

}else{

reject(xhr.status);

}

xhr.onerror=function(){

reject(xhr.status);

}

xhr.open("POST","http://localhost:8000");

xhr.send(JSON.stringify(data));

})

}

ajax({name:"xietian",age:30}).then(function(res){

console.log(res);

}).catch(function(err){

console.log(err);

})

Promise

这个对象有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。

这个对象状态有一定顺序，从 Pending 到Resolved 再到 Rejected 这个顺序不可逆;

语法：

补充：

abort
abort() 方法将终止请求，如果该请求已被发出。当一个请求被终止，它的 readyState 属性将被置为0（ UNSENT ），但是并不触发 readystatechange 事件。

事件：
loadstart
当程序开始加载时，loadstart 事件将被触发。也适用于 <img> 和 <video> 元素.
Progress
进度事件会被触发用来指示一个操作正在进行中。

loaded 当前加载字节
total 总字节

abort 当一个资源的加载已中止时，将触发 abort事件。
error 当一个资源加载失败时会触发error事件。
load 当一个资源及其依赖资源已完成加载时，将触发load事件。
timeout 当进度由于预定时间到期而终止时，会触发timeout 事件
loadend 当一个资源加载进度停止时 (例如，在已经分派“错误”，“中止”或“加载”之后)，触发loadend事件。这适用于例如 XMLHttpRequest调用, 以及<img>或<video>元素的内容。

loaded 已加载
total 总计数据
readystatechange 当一个文档的 readyState 属性发生更改时，readystatechange 事件会被触发。

posted @ 2020-04-26 01:39 我是乐呀阅读(275) 评论(0) 收藏举报

刷新页面返回顶部

Ajax(全)

JSON

ajax

XMLHttpRequest

open

http头部

本地数据的加载问题：

同步和异步

http头部补充

send

发送json字符串

timeout

readyState

Promise

补充：

公告