Ajax

1.什么是ajax？

ajax的出现,刚好解决了传统方法的缺陷。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2.XMLHttpRequest 对象

XMLHttpRequest对象是ajax的基础,XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest。

 

方 法	描 述
abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader(“header”)	返回指定首部的串值
open(“method”,”URL”,[asyncFlag],[“userName”],[“password”])	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码
send(content)	向服务器发送请求
setRequestHeader(“header”, “value”)	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 (‘post’方法一定要 )

五步使用法:

1. 创建XMLHTTPRequest对象
2. 使用open方法设置和服务器的交互信息
3. 设置发送的数据，开始和服务器端交互
4. 注册事件
5. 更新界面

3.get请求的实例：

//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open('get','getStar.php?starName='+name);
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
   if (ajax.readyState==4 &&ajax.status==200) {
    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
　　　　console.log(ajax.responseText);//输入相应的内容
  　　}

}

4.post请求的实例：

//创建异步对象  
var xhr = new XMLHttpRequest();
//设置请求的类型及url
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.open('post', '02.post.php' );
//发送请求
xhr.send('name=fox&age=18');
xhr.onreadystatechange = function () {
    // 这步为判断服务器是否正确响应
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  } 
};

5.HTTP 方法：GET 对比 POST

在客户机和服务器之间进行请求-响应时，两种最常被用到的方法是：GET 和 POST。

• GET - 从指定的资源请求数据。
• POST - 向指定的资源提交要被处理的数据。

• GET 方法

  请注意，查询字符串（名称/值对）是在 GET 请求的 URL 中发送的：

  /test/demo_form.asp?name1=value1&name2=value2

  有关 GET 请求的其他一些注释：

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

• POST 方法

  请注意，查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的：

  POST /test/demo_form.asp HTTP/1.1
  Host: w3schools.com
  name1=value1&name2=value2
  

  有关 POST 请求的其他一些注释：

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

• 比较 GET 与 POST

  下面的表格比较了两种 HTTP 方法：GET 和 POST。

  	GET	POST
  后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
  书签	可收藏为书签	不可收藏为书签
  缓存	能被缓存	不能缓存
  编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
  历史	参数保留在浏览器历史中。	参数不会保存在浏览器历史中。
  对数据长度的限制	是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。	无限制。
  对数据类型的限制	只允许 ASCII 字符。	没有限制。也允许二进制数据。
  安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。 在发送密码或其他敏感信息时绝不要使用 GET ！	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
  可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。

使用方法补充

1- npm i axios -S
2- 引入axios.js
3- get请求
    axios.get('url?id=xxx').then(function (response) {成功后的回调函数，注意该插件对返回值做了进一步的封装，数据服务器实际返回的数据在response.data中，也经常用response.status判断状态码})
    .catch(function (error) {失败以后的回调,可以省略不写});
    也可以直接写作：axios('url?id=xxx').then();
4- post请求
   axios.post('/user', {直接通过这种方式传递到服务器的数据格式是json格式的，$.ajax对传递的数据做了'www-form-urlencoded'处理，这里应该自己传入一个去掉花括号序列化的数据})
  .then(function (response) {
    成功时的回调函数
  })
  .catch(function (error) {
   失败时的回调函数
  });
  如：axios.post(url,$('form').serialize).then()