Ajax 和 Axios

ajax

什么是ajax

Async javascript and XML

{
	name:"王凯",
	age:2,
	sex:"未知"
}

<user>
  <name>王凯</name>
  <age>2</age>
  <sex>未知</sex>
</user>

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

ajax优势

改善的用户体验- AJAX提供的更丰富的用户体验是其主要优点。AJAX允许网页持续更新，但只需要和服务器交互很少的数据。这样，就能在不必整个更新网页的情况下更新网页的一部分。经典的网页技术必须整个更新网页（即使你只想更新某一部分），是笨重的。 AJAX增强了浏览器性能，使更快的浏览成为可能因此提供了有求必应的用户体验。
增强用户生产力- AJAX 库提供了面向对象的辅助函数，能给用户减少麻烦，增强生产力。另外，一个良好配置的ASP.NET应用有它自己的数据访问层和业务层。最后，“鲁棒”的ASP.NET应用包含UI层，在这一层执行服务器端操作。如果你已经包含了这些特性，AJAX只需要一个额外的AJAX服务层和一些客户端特性的改进。这样，开发代价就减小了，用户生产效率也就增加了。流行的站点如亚马逊，谷歌，雅虎等等都在开发中使用了AJAX。
减少带宽的使用并增加速度- AJAX使用客户端脚本来和web服务器通讯，用Javascript来交互数据。使用AJAX能减少网路负载和带宽使用并且只获得你所需的数据。这样能给你更快的接口和更低的响应时间。响应更快因此性能和速度增加了
增强兼容性- AJAX和ASP.NET,J2EE,PHP或者其他任何语言兼容。它几乎支持所有流行的浏览器比如IE5及以上版本，Firefox1.0及以上版本，Safari1.2及以上版本，Opera7.6及以上版本，还有RockMelt。
支持异步处理- 使用XmlHttpRequest来进行异步数据获取，这是AJAX应用的中坚力量。所以，请求能被有效的处理，动态内容加载被提升到一个更高的层次，性能也得到了增强
减少服务器请求和网络负载-Atlas，微软AJAX库的一种较老的形式，是一个整合了客户端Javascript库并且易用的框架，能和ASP.NET一起开发AJAX应用。它提供了跨浏览器支持和面向对象的API，这用来能开发具有最小化服务器请求/网路负载的应用,并能实现异步处理
更容易导航-AJAX应用能被用来简化用户在网页间的过渡，而不需要使用传统的前进后退键

AJAX的缺点

浏览器不兼容-AJAX高度依赖Javascript，而不同的浏览器对Javascript支持性不同。这成了一个问题，尤其是当AJAX必须跨许多浏览器工作的时候。那些不支持Javascript或者不支持Javascript某些选项的浏览器将不能够正常使用ajax。由于ajax对Javascript的依赖性，它不适用移动应用。你的web浏览器的后退键不能如期运行。
不安全性-网页可能很难调试，增加网页的代码量，你的网页更可能遇上严峻的安全威胁。
增加Web服务器的负载-如果你增加一个自动更新的功能，它每隔几秒向服务发起请求，那么就会增加服务器的负载

ajax基本写法及请求分为哪几步

创建一个 XHR 对象（需要考虑浏览器差异）

var request=null;  
if (window.XMLHttpRequest)  
    {// 兼容 IE7+, Firefox, Chrome, Opera, Safari  
        xhr=new XMLHttpRequest();  
    } else{// 兼容 IE6, IE5 
        xhr=new ActiveXObject("Microsoft.XMLHTTP");  
}

监听请求成功后的状态变化

request.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(request.responseText)
  }
};

第三行的 request.responseText 就是服务器返回的内容了（默认是字符串）

设置请求参数

request.open(method,url,async);

请求的三个参数分别是：请求的方法、请求的地址、和是否采用异步请求。

发送请求

request.send();

同步什么是异步

同步：一个任务执行完成之后才能进行下一个任务。

异步：多个任务可以同时进行。

AJAX的异步：如果我要实现一个在表单中填写用户名时需要后台验证该用户名是否已存在的功能，当我输入用户名之后我可以去执行其他的操作（填写其他的文本框例如密码等）而不用去等后台返回这个用户名是否可用。
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

get和post区别

HTTP

超文本传输协议（HTTP）的设计目的是保证客户机与服务器之间的通信。

HTTP 的工作方式是客户机与服务器之间的请求-应答协议。

web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。

举例：客户端（浏览器）向服务器提交 HTTP 请求；服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。

GET - 从指定的资源请求数据。

GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据

POST - 向指定的资源提交要被处理的数据

POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求

区别

GET在浏览器回退时是无害的，而POST会再次提交请求。
GET产生的URL地址可以被Bookmark，而POST不可以。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST么有。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET参数通过URL传递，POST放在Request body中。

https://www.zhihu.com/question/28586791

JSON.parse()

JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

参数

text

要被解析成 JavaScript 值的字符串

reviver 可选

转换器, 如果传入该参数(函数)，可以用来修改解析生成的原始值，调用时机在 parse 函数返回之前。

指定了 reviver 函数，则解析出的 JavaScript 值（解析值）会经过一次转换后才将被最终返回（返回值）。更具体点讲就是：解析值本身以及它所包含的所有属性，会按照一定的顺序（从最最里层的属性开始，一级级往外，最终到达顶层，也就是解析值本身）分别的去调用 reviver 函数，在调用过程中，当前属性所属的对象会作为 this 值，当前属性名和属性值会分别作为第一个和第二个参数传入 reviver 中。如果 reviver 返回 undefined，则当前属性会从所属对象中删除，如果返回了其他值，则返回的值会成为当前属性新的属性值。

当遍历到最顶层的值（解析值）时，传入 reviver 函数的参数会是空字符串 ""（因为此时已经没有真正的属性）和当前的解析值（有可能已经被修改过了），当前的 this 值会是 {"": 修改过的解析值}，在编写 reviver 函数时，要注意到这个特例。（这个函数的遍历顺序依照：从最内层开始，按照层级顺序，依次向外遍历）

JSON.parse('{"p": 5}', function (k, v) {
    if(k === '') return v;     // 如果到了最顶层，则直接返回属性值，
    return v * 2;              // 否则将属性值变为原来的 2 倍。
});                            // { p: 10 }

JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
    console.log(k); // 输出当前的属性名，从而得知遍历顺序是从内向外的，
                    // 最后一个属性名会是个空字符串。
    return v;       // 返回原始属性值，相当于没有传递 reviver 参数。
});

JSON.stringfy()

作用：将json对象转换成json字符串。

语法：JSON.stringify(value [, replacer] [, space])

参数：value 必须；通常为对象或数组。

replacer 可选，用于转换结果的函数或者数组。

space 可选。向返回值 JSON 文本添加缩进、空格和换行符以使其更易于读取。

返回值：一个包含JSON文本的字符串。

replacer 参数可以是一个函数或者一个数组。作为函数，它有两个参数，键（key）和值（value），它们都会被序列化。

在开始时, replacer 函数会被传入一个空字符串作为 key 值，代表着要被 stringify 的这个对象。随后每个对象或数组上的属性会被依次传入。

函数应当返回JSON字符串中的value, 如下所示:

如果返回一个 Number, 转换成相应的字符串作为属性值被添加入 JSON 字符串。
如果返回一个 String, 该字符串作为属性值被添加入 JSON 字符串。
如果返回一个 Boolean, "true" 或者 "false" 作为属性值被添加入 JSON 字符串。
如果返回任何其他对象，该对象递归地序列化成 JSON 字符串，对每个属性调用 replacer 方法。除非该对象是一个函数，这种情况将不会被序列化成 JSON 字符串。
如果返回 undefined，该属性值不会在 JSON 字符串中输出。

注意: 不能用 replacer 方法，从数组中移除值（values），如若返回 undefined 或者一个函数，将会被 null 取代。

function replacer(key, value) {
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}

var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
var jsonString = JSON.stringify(foo, replacer);

eval()

eval() 函数会将传入的字符串当做 JavaScript 代码进行执行

console.log(eval('2 + 2'));
// expected output: 4

console.log(eval(new String('2 + 2')));
// expected output: 2 + 2

console.log(eval('2 + 2') === eval('4'));
// expected output: true

console.log(eval('2 + 2') === eval(new String('2 + 2')));
// expected output: false

作用：eval()函数可计算某个字符串，并执行其中的javascript表达式或要执行的语句。

语法：eval(string)

参数： string 必须，需要计算的字符串，其中含有要计算的javascript表达式或要执行的语句。

返回值：返回计算string的值，没有的话不做任何改变返回。

使用eval()函数也可以将JSON字符串解析为对象，这个功能能完成JSON.parse()的功能，但是有不一样的地方

XMLHttpRequest对象的常用方法和属性

1、readyState属性
当一个XMLHttpRequest对象被创立后，readyState属性标示了当前对象处于什么状态，可以通过对该属性的访问，来判读此次请求的状态然后做出相应的操作，
case 0 :
未初始化状态，此时，已经创建了一个XMLHttpRequest对象，但是还没有初始化。
Case 1:
准备发送状态：此时，已经调用了XMLHttpRequest对象的open()方法，并且XMLHttpRequest对象已经准备好将一个请求发送到服务器。
case 2：
已发送状态，此时已经通过send方法把一个请求发送到服务器，等待响应。
case 3:
正在接收状态，此时已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收到。
case 4:
完成响应状态，此时已经完成了HttpResponse响应的接收
2.responseText属性
responseText属性包含客服端接收到的HTTP响应的文本内容，当readyState属性为0、1或2时，responseText属性包含一个空字符串：当readyState属性值为3时，响应中包含客服端还没完成的响应信息；当readyState属性值卫4，responseText属性才包含完整的响应信息。
3.responseXML属性
只有当readyState属性为4，并且响应头部的Content-Type的MIME类型被指定为XML(text/xml或者application/xml)时，该属性才会有值并且被解析成一个XML文档，否则该属性为null。如果是回传的XML文档结构不良或者未完成响应回传，该属性也会为null。responseXML属性用来描述被XMLHttpRequest解析后的XML文档的属性。
4.status属性
status属性描述了HTTP状态代码，注意，仅当readyState属性值为3（正在接受中）或者4（已加载）时，才能对此属性进行访问。如果在readyState属性值小于3时，试图去读取status属性值，将引发一个异常。
5.statusText属性
statusText属性描述了HTTP状态代码文本，并且仅当readyState属性为3或者4才可用。当readyState属性为其他值时试图存取statusText属性将引发一个异常。
6.onreadystatechange事件
每当readyState属性发生改变时，就好触发onreadystatechange事件，一般都要通过该事件来触发回传处理函数。
7.open()方法
XMLHttpRequest对象是通过调用open(method,uri,async,username,password)方法来进行初始化工作的。调用该方法将得到一个可以用来进行发送的对象，open有五个参数。
//method参数是必须的，用来指定发送请求的HTTP方法（GET,POST,PUT,DELETE,HEAD)参数要大写。
//async参数用用指定是否请求是异步的，默认是true。如果需要发送一个同步请求，需要把该参数设置为false。
//如果需要服务器验证访问用户的情况，可以设置username和password
8.send方法
调用open()方法后，就可以通过调用send()方法按照open方法设定的参数将请求进行发送。当open方法中async为true，在send（）方法调用后立即返回，否则将会中断直到请求返回。要注意的是，send方法必须在readyState为1时调用open方法以后才能调用。在调用send方法以后到接收响应信息知情，readyState属性的值将被设置成2.一旦接收到响应信息，readyState属性将被设为3.直到响应接收完成，readyState属性的值才会被设定为4。
send()方法使用一个可选的参数，该参数可以包含可变类型的数据。用户可以使用它并通过POST方法把数据发送到服务器。另外可以显示的使用null参数调用sned方法，这与不用参数调用该方法一样。对于大多数其他的数据类型，在调用send方法之前，应该使用setRequestHeader()方法先设置Content-Type头部，如果send（data)方法中的data参数的类型为DOMString,那么数据将被编码成UTF-8，如果是Document类型，那么将使用由data.xmlEncoding指定的编码串行化该数据。
9.abort()方法
该方法可以暂停一个HttpRequest的请求发送或者HttpResponse的接收，并且将XMLHttp Request对象设置为初始化状态。
10.setRequestHeader()方法
该方法用来设置请求的头部信息。当readyState属性为1时，可以调用opne方法后调用这个方法；否则将得到一个异常。setRequestHeader(header,value)方法包含两个参数，第一个是header键名称，后一个是键值。
11.getResponseHeader方法
此方法用于检索响应的头部值，仅能当readyState属性是3或者4（既响应头部可用以后）才可用调用该方法。否则，该方法返回一个空字符串。此外，还可以通过getAllResponse Header()方法获取所有的HttpResponse的头部信息。

HTTP常见状态码

https://blog.csdn.net/laishaohe/article/details/79052085

jsonp

什么是同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。

当一个浏览器的两个tab页中分别打开来百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。

如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

同源

域名、协议、端口相同，也就是在同一个域里。

非同源受到的限制

cookie不能读取（如我在自己的站点无法读取博客园用户的cookie）
dom无法获得
ajax请求不能发送

跨域

一个域的页面去请求另一个域的资源；A域的页面去请求B域的资源。

所谓的同源是指，域名、协议、端口均为相同。

http://www.nealyang.cn/index.html 调用   http://www.nealyang.cn/server.php  非跨域

http://www.nealyang.cn/index.html 调用   http://www.neal.cn/server.php  跨域,主域不同

http://abc.nealyang.cn/index.html 调用   http://def.neal.cn/server.php  跨域,子域名不同

http://www.nealyang.cn:8080/index.html 调用   http://www.nealyang.cn/server.php  跨域,端口不同

https://www.nealyang.cn/index.html 调用   http://www.nealyang.cn/server.php  跨域,协议不同

localhost   调用 127.0.0.1 跨域

常见的解决跨域的方式有哪些

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>判断显示内容是否存在省略号</title>
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        // 谷歌浏览器在访问本地文件时 存在跨域问题
        // $(function () {
        //     $.ajax({
        //         url: 'demo.json',
        //         type: 'get',
        //         success: function (res) {
        //             console.log(res)
        //         }
        //     })
        // })
    </script>
     <!-- // 可以使用jsonp进行跨域 不过jsonp只支持get请求 -->
 
     <script>
     function demo(res){
         console.log(res)
     }
     </script>
      <!-- 注意：引入的文件名需要和json文件中的函数名需要相同 并且引入的json文件需要写在定义函数之上 否则会读取json文件失败 -->
     <script src="./demo.json?callback=demo"></script>
</body>

</html>

 在json文件中 定义demo时 必须要有 （括号） 
demo({
    "pro":[
        {"name":"tom"},
        {"sex":"man"},
        {"job":"web"}
    ]
})

jsonp是什么

1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准。

2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<\script>、<\img>、<\iframe>）。

3、于是可以判断，当前阶段如果想通过纯web端（ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算）跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理。

4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据。

5、这样子解决方案就呼之欲出了，web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件（一般以JSON为后缀），显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装入进去。

6、客户端在对JSON文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行处理和展现了，这种获取远程数据的方式看起来非常像AJAX，但其实并不一样。

7、为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

jsonp原理

目录CONTENT

Ajax和axios.md