ajax全掌握

介绍

ajax——Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

注意，和其他JavaScript插件一样，是现有标准的新方法！

应用场景：web上应用太广泛了！比如：

• 页面上拉加载更多数据
• 无刷新分页
• 表单验证
• 搜索下拉框自动提示文字
• 等等...........

前言

掌握前需要知道的知识：

• 什么是协议？
  • 就是都需要遵循的一种标准
• 有哪些必须了解的协议及解释？
  • TCP、HTTP、HTTPS、FTP
  • TCP（传输控制协议）：面向连接，可靠传输；相对的协议是UDP（用户数据报协议）：面向无连接，不可靠传输-比如广播
  • HTTP（超文本传输协议）：基于TCP协议，是面向连接的协议；网页看到“不安全”，就是使用的HTTP协议
  • HTTPS：安全的超文本传输协议；网页看到“安全”，就是使用的HTTPS协议
  • FTP（远程文件传输协议）：允许用户将远程主机上的文件拷贝到自己的计算机上
• HTTP协议的三次握手和四次挥手
  • 建立连接需要通过3次握手（请求告诉对方你是谁；对方响应确认了你的身份；你发送请求）
  • 断开连接需要通过4次挥手（请求告诉对方你已经把新的请求发过去了；对方响应确认你的请求已发送；对方告诉你已经将结果响应给你了；你就确认已经收到了对方的响应结果）
• HTTP协议构成
  • 请求：请求头（包括url、method、query参数）、请求体
  • 响应：响应头（响应的文件类型）、响应体

问题：JavaScript使用异步的原因？

JavaScript是单线程的

问题：ajax的优点不用多说，那缺点呢？

• 没有了页面前进后退的
• 不同的浏览器版本对XMLHttpRequest对象兼容性不一样

常见状态码：

100~199          表示连接成功

200~299          表示请求成功

300~399          表示重定向

400~499          表示客户端错误

500~599          表示服务端错误

json（JavaScript Object Notation---JavaScript对象表示法）数据格式

json是一种数据格式，比xml更轻巧。

json编写规则：

对象是一个 无序 的“‘名称 /值’ 对”集合 。一个对象以 “{”（左括号 ）开始 ，“}”（ 右括号 ）结束 。每个 “名称 ”后跟一个 后跟一个 后跟一个 后跟一个 “:”（冒号 ）； “‘ 名称 /值’ 对”之间使用 “,”（逗号 ）分隔 。

//单条json数据
{
    name: '张三',
    sex: '男',
    subject: ['数学', '英语', '化学'],
    score: {
        '数学': 88,
        '英语': 78,
        '化学': 90
    }
}

//json数组
[
    {name: '张三', sex: '男', subject: ['数学', '英语', '化学'], score: {'数学': 88, '英语': 78, '化学': 90},
     {name: '李四', sex: '男', subject: ['数学', '英语', '化学'], score: {'数学': 88, '英语': 78, '化学': 90},
     {name: '王五', sex: '男', subject: ['数学', '英语', '化学'], score: {'数学': 88, '英语': 78, '化学': 90},
 {name: '李芳', sex: '女', subject: ['数学', '英语', '化学'], score: {'数学': 88, '英语': 78, '化学': 90}
}
]

var data = {
 '重庆市':{
    '重庆市': ['渝中区' '南岸区', '北碚区', '万盛区', '双桥区', '渝北区', '巴南区', '万州区', '涪陵区', '黔江区', '长寿区', '合川市']
    },
 
 '河北省': {
    '石家庄市': ['无极县', '无极镇', '平山县', '平山镇', '元氏县', '槐阳镇', '赵县', '赵州镇'],   
    '张家口市': ['涿鹿镇', '赤城县', '赤城镇', '崇礼县', '西湾子镇'],  
    '承德市': ['双桥区', '双滦区', '鹰手营子矿区', '承德县', '下板城镇', '兴隆县', '兴隆镇', '平泉县', '宽城镇', '围场满族蒙古族自治县', '围场镇']
}

正文

原生JavaScript的ajax

XMLHttpRequest对象是ajax的核心机制。

XMLHttpRequest的方法：

open('method', url, true/false)	建立对服务器的调用（包含设置请求的属性参数，其中第三个参数是否异步）
send(conten)	向服务器发送请求
abort()	终端当前请求
setRequestHeader('header', 'value')	设置请求头参数
getResponseHeader('header')	获取响应头指定参数值
getAllResponseHeader()	获取响应头全部参数（以键值对的方式）

XMLHttpRequest的属性：

onreadystatechange	readyState状态值改变触发------事件处理程序
responseText	服务器响应的数据----字符串形式
responseXML	服务器响应的的数据---xml形式（键值对的json格式）
readyState	对象状态值： 0-------------对象已建立，但尚未初始化（尚未调用open方法） 1-------------对象已建立，已初始化，但尚未调用send方法 2-------------send方法已调用，但当前状态及http头未知 3-------------只接收到部分数据（因为响应及http头不全）---responseBody和responseText会出现错误 4-------------数据接收完毕，可以通过responseXML和responseText获取结果
status	状态码
statusText	伴随状态码的字符串信息

    function CreateXMLHttp() {
      // 非IE浏览器
      if(window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      }
      // IE浏览器
      if(window.ActiveXObject) {
        try {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e) {
          try {
            xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
          }
          catch(e) {}
        }
      }
    }

    function getInfo() {
      // 获取文本框输入的值
      let data = document.querySelector('#uname').value;
      // 输入信息的验证结果
      let text = document.querySelector('#span_uname').innerText;

      CreateXMLHttp();

      if(!xmlhttp) {
        console.log('创建xmlhttp对象异常！')
        return false;
      }

      xmlhttp.open('GET', 'https://autumnfish.cn/api/user/reg?username='+data, true);

      xmlhttp.onreadystatechange = function() {
        // 数据接收完毕---对象状态值4
        if(xmlhttp.readyState == 4) {
          text = '数据正在加载...';
          // 返回状态码---200
          if(xmlhttp.status == 200) {
            text = xmlhttp.responseText;
          }
        }
      }

      xmlhttp.send();
    }

明白原生JavaScript的ajax原理，对原生的JavaScript封装的插件库使用ajax就更方便了！

jQuery的ajax

最底层的方法：

$.ajax()           

第二层的方法：  （最常用）

$('').load()

$('').get()              $('').post()

第三层的方法：(异步加载JavaScript文件、json文件)

$.getScript()              $.getJSON()

$(selector).load(URL,data,function(response, status, xhr) {

});

$(selector).get(URL,data,success(response,status,xhr) {

},dataType);

$(selector).post(URL,data,success(response,status,xhr) {

},dataType);

$.getScript(URL,success(response,status) {

});

$.post(URL,success(response,status) {

});

//load
//将文件内容显示在#div1
$("#div1").load("demo_test.txt");

//回调函数
$("#div1").load("/example/jquery/demo_test.txt",function(response,status,xhr){
    if(status=="success")
        alert("外部内容加载成功！");
    if(status=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
});


//get
$.get("/example/jquery/demo_test.asp",function(data,status){
    alert("数据：" + data + "\n状态：" + status);
});

//post
$.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });

 axios

axios底层也使用的原生ajax