初学AJAX

• AJAX介绍
• AJAX原理
• 原生AJAX
• 数据交换格式
• $.ajax()
• $.get()和$.post()

什么是 AJAX？

AJAX = Asynchronous JavaScript And XML.

AJAX 并非编程语言。

AJAX 仅仅组合了：

• 浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
• JavaScript 和 HTML DOM（显示或使用数据）

Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。

Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。

AJAX特点：

优点：

• 可以无需刷新页面，与服务器进行通信
• 允许依据用户事件来更新部分页面内容

缺点：

• 没有浏览历史，不能回退
• 存在跨域问题（同源）
• SEO不友好（搜索引擎优化，对爬虫不友好）

AJAX原理

1. 网页中发生一个事件（页面加载、按钮点击）
2. 由 JavaScript 创建 XMLHttpRequest 对象
3. XMLHttpRequest 对象向 web 服务器发送请求
4. 服务器处理该请求
5. 服务器将响应发送回网页
6. 由 JavaScript 读取响应
7. 由 JavaScript 执行正确的动作（比如更新页面）

jQuery.ajax()	执行异步 HTTP (Ajax) 请求。
.ajaxComplete()	当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError()	当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend()	在 Ajax 请求发送之前显示一条消息。
jQuery.ajaxSetup()	设置将来的 Ajax 请求的默认值。
.ajaxStart()	当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop()	当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess()	当 Ajax 请求成功完成时显示一条消息。
jQuery.get()	使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON()	使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript()	使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。
.load()	从服务器加载数据，然后把返回到 HTML 放入匹配元素。
jQuery.param()	创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post()	使用 HTTP POST 请求从服务器加载数据。
.serialize()	将表单内容序列化为字符串。
.serializeArray()	序列化表单元素，返回 JSON 数据结构数据。

原生AJAX

        Ajax通过XMLHttpRequest对象来向服务器发出异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面

        （1）创建Ajax对象（XMLHttpRequest）

var xmlhttp = new XMLHttpRequest()

         （2）判断数据的传输方式（get/post）打开连接open()

xmlhttp.open("get", "http://127.0.0.1:8090", true)

方法	描述
open(method,url,async)	规定请求的类型，URL以及是否异步处理请求。 method：请求的类型；GET或POST url：文件在服务器上的位置 async：true（异步）或false（同步）

        （3）获得响应

        如需获得来自服务器的响应，请使用XMLHttpRequest对象的responseText或responseXML。

属性	描述
responseText	获得字符串形式的响应数据
responseXML	获得XML形式的响应数据

onreadystatechange事件

        当请求被发送到服务器时，我们需要执行一些基于响应的任务

        每当readyState改变时，就会触发onreadystatechange事件

        readyState属性存有XMLHttpRequest的状态信息

        下面是XMLHttpRequest对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当readyState属性改变时，就会调用该函数
readyState	存有XMLHttpRequest的状态 从0到4发生变化 0：请求未初始化 1：服务器连接已建立 2：请求已接收 3：请求处理中 4：请求已完成，且响应已就绪
status	200:"OK" 404:未找到页面

        在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

在readyState等于4且状态为200时，表示响应已就绪

如需获得来自服务器的响应，使用XMLHttpRequest对象的responseText或reasponse属性

• responseText获得字符串形式的响应数据
• responseXML获得XML形式的响应数据

        （4）发送send()

xmlhttp.send();

方法	描述
send(string)	将请求发送到服务器。string:仅用于POST请求

---

 数据交换格式

数据交互格式，就是服务器端与客户端之间进行数据传输与交换的格式

前端领域，经常提及的两种数据交换格式分别为XML和JSON。XML用得非常少，所以，重点学习的数据交互格式是JSON。

什么是XML

XML，即可扩展标记语言。因为它也是一种标记语言因此XML和HTML类似

        XML和HTML的区别
        XML和HTML虽然都是标记语言，但是它们二者没有任何的关系。

        HTML被设计用来描述网页上的内容，是网页内容的载体

        XML被设计用来传输和存储数据，是数据的载体。

XML的缺点：
1、XML格式臃肿，和数据无关的代码多，体积大，传输效率低

2、在Javascript中解析XML比较麻烦

什么是JSON

        概念：JSON，即“javascript对象表示法”。简单来说，JSON就是javascript对象和数组的字符串表示法。他使用文本表示一个JS对象或数组的信息，因此JSON的本质是字符串。

        作用：JSON是一种轻量级的文本数据交换格式，在作用上类似于XML，专门用于存储和传输数据，但是JSON比XML更小、更快、更易解析。

        现状：JSON已经成为了主流的数据交互格式

JSON的两种结构

对象结构：对象结构在JSON中表示为{ }括起来的内容。数据结构;为{ key: value, key: value, …}的键值对结构。其中，可以必须是使用英文的双引号包裹的字符串，value的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

{
    "name":"zs",
    "age":20,
    "gander":"男",
    "address":null,
    "hobby":["吃饭","睡觉","打代码"]
}

 数组结构：数组结构在JSON中表示为[ ]括起来的内容。数据结构为[“java”, “javascript”, 30, true, …]。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

[ "java", "python", "php" ] //数组里放字符串
[100, 200, 300.5] //数组里放数据
[true, false, null] //数组里放布尔值和null
[{"name":"zs", "age":20}, {"name":"ls", "age":30}] //注意数组里是对象的话，对象里的字符串还是都要用双引号包住
[["苹果", "榴莲", "椰子"], [4, 50, 5]] //数组里放数组

JSON注意事项
1、属性名必须用双引号包裹

2、字符串类型的值必须使用双引号包裹

3、JSON中不允许使用单引号表示字符串，必须用双引号包裹

4、JSON中不能写注释

5、JSON的最外层必须是对象或数组格式

6、不能使用undnefined或函数作为JSON的值，必须是上面规定的那六种值。

JSON的作用：在计算机与网络之间存储和传输数据

JSON的本质：用字符串来表示javascript对象数据或数组数据。

<input type="button" name="btn1" id="btn1" value="发送" />
    <div id="div1"></div>
    <script>
        document.querySelector("#btn1").onclick = function() {
            // 第一步: 创建一个XMLHttpRequet对象
            var xmlhttp = new XMLHttpRequest()
                // 第二步: 告诉浏览器请求的方式是什么， 以及请求发送到哪儿xmlhttp.open("get", "url", true) /
            xmlhttp.open("get", "data/student.json", true)
                // 第三步: 设置响应服务器端数据处理
            xmlhttp.onreadystatechange = function() {
                    //做数据处理
                    var students = JSON.parse(xmlhttp.responseText)
                        // console.log(students[0].stuID)
                        // var students = xmldata.getElementsByTagName("student")
                    var table = "<table border='1' bordercolor='red'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>";
                    for (var i = 0; i < students.length; i++) {
                        // 查找student标签中的stuID，stuName，stuAge
                        var stuid = students[i].stuID
                        var stuname = students[i].stuName
                        var stuage = students[i].stuAge
                        table += "<tr><td>" + stuid + "</td><td>" + stuname + "</td><td>" + stuage + "</td></tr>"
                    }
                    table += "</table>"
                    document.querySelector("#div1").innerHTML = table
                }
                //第四步:发送请求xmlhttp.send()
            xmlhttp.send()
        }
    </script>

---

$.ajax 

        执行异步AJAX请求。

定义和用法

ajax()方法用于执行AJAX（异步HTTP）请求

所有的jQuery AJAX方法都使用ajax()方法，该方法通常用于其他方法不能完成的请求。

语法

$.ajax(name:value,name{value,...})

改参数规定AJAX请求的一个或多个名称/值对

下面的表格中列出了可能的名称/值：
HTTP请求: GET vs POST
两种在客户端和服务器端进行请求-响应的常用方法是:GET和POST。

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

GET基本上用于从服务器获得(取回）数据。注释:GET方法可能返回缓存数据。
POST也可用于从服务器获取数据。不过，POST方法不会缓存数据，并且常用于连同请求一起发送数据。

$.get()方法

定义和用法

get() 方法通过远程 HTTP GET 请求载入信息。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

语法

$(selector).get(url,data,success(response,status,xhr),dataType)

• URL:发送请求的URL字符串。
• data:可选的，发送给服务器的字符串或key/value 键值对。.
• callback:可选的，请求成功后执行的回调函数。
• dataType:可选的，从服务器返回的数据类型。默认︰智能猜测（可以是xml, json, script,或 html)。

下面的例子使用$.get()方法从服务器上的一个文件中取回数据:

$("#btn1").click(function{
$.get("demo01.txt" , function(data,status){
alert("返回内容:" + data + "\n状态:"+ status) ;
    });
}) ;

• $.get()的第一个参数是我们希望请求的URL ("demo.txt") 。
• 第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

$.post()方法

定义和用法

post() 方法通过 HTTP POST 请求从服务器载入数据。

语法

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

参数	描述
url	必需。规定把请求发送到哪个 URL。
data	可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)	可选。请求成功时执行的回调函数。
dataType	可选。规定预期的服务器响应的数据类型。 默认执行智能判断（xml、json、script 或 html）。

详细说明

该函数是简写的 Ajax 函数，等价于：

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

根据响应的不同的 MIME 类型，传递给 success 回调函数的返回数据也有所不同，这些数据可以是 XML 根元素、文本字符串、JavaScript 文件或者 JSON 对象。也可向 success 回调函数传递响应的文本状态。