Web (6) Ajax

1.AJAX概念：

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

1. 异步和同步：客户端和服务器端相互通信的基础上
        * 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
        * 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

2.AJAX 可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页。

3.AJAX 仅仅组合了：

• 浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）

• JavaScript 和 HTML DOM（显示或使用数据）

4.工作流程：

2. 实现方式：

1. 原生的JS实现方式（了解）

     1.创建核心对象
        所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
       老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
       所以首先判断浏览器版本，然后建立相应的对象             

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

    2. 建立连接
          open(method,url,async)

• method：请求的类型；GET 或 POST

                        get方式，请求参数在URL后边拼接。send方法为空参。简单快捷，适用于大部分情况。
                        post方式，请求参数在send方法中定义。在以下情况中使用 POST 请求：

•                                                               无法使用缓存文件（更新服务器上的文件或数据库）
•                                                               向服务器发送大量数据（POST 没有数据量限制）
•                                                               发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

xmlhttp.open("GET","ajaxServlet?username=tom",true);

    3.发送请求

  xmlhttp.send();

     4.当服务器响应成功后,接受并处理来自服务器的响应结果 ,当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。

         readyState 属性存有 XMLHttpRequest 的状态信息。

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

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

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为 200 时，表示响应已就绪： 

xmlhttp.onreadystatechange=function()
{
//判断readyState就绪状态是否为4，判断status响应状态码是否为200
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    { //获取服务器的响应结果
         var responseText = xmlhttp.responseText;//获得字符串形式的响应数据。
//如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，使用 responseXML
         alert(responseText);  
     }
}

    2. JQeury实现方式
        1. $.ajax()
            * 语法：$.ajax({键值对});
             //使用$.ajax()发送异步请求
                $.ajax({
                    url:"ajaxServlet1111" , // 请求路径
                    type:"POST" , //请求方式
                    //data: "username=jack&age=23",//请求参数
                    data:{"username":"jack","age":23},
                    success:function (data) {
                        alert(data);
                    },//响应成功后的回调函数
                    error:function () {
                        alert("出错啦...")
                    },//表示如果请求响应出现错误，会执行的回调函数
    
                    dataType:"text"//设置接受到的响应数据的格式
                });
        2. $.get()：发送get请求
            * 语法：$.get(url, [data], [callback], [type])
                * 参数：
                    * url：请求路径
                    * data：请求参数
                    * callback：回调函数
                    * type：响应结果的类型

        3. $.post()：发送post请求
            * 语法：$.post(url, [data], [callback], [type])
                * 参数：
                    * url：请求路径
                    * data：请求参数
                    * callback：回调函数
                    * type：响应结果的类型

3.XMLHttpRequest 对象

所有现代浏览器都支持 XMLHttpRequest 对象。

XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。

创建 XMLHttpRequest ：

variable = new XMLHttpRequest();

老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象：

variable = new ActiveXObject("Microsoft.XMLHTTP");

XMLHttpRequest 对象方法：

方法	描述
new XMLHttpRequest()	创建新的 XMLHttpRequest 对象
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息
open(method, url, async, user, psw)	规定请求method：请求类型 GET 或 POSTurl：文件位置async：true（异步）或 false（同步）user：可选的用户名称psw：可选的密码
send()	将请求发送到服务器，用于 GET 请求
send(string)	将请求发送到服务器，用于 POST 请求
setRequestHeader()	向要发送的报头添加标签/值对

XMLHttpRequest 对象属性：

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存 XMLHttpRequest 的状态。0：请求未初始化1：服务器连接已建立2：请求已收到3：正在处理请求4：请求已完成且响应已就绪
responseText	以字符串返回响应数据
responseXML	以 XML 数据返回响应数据
status	返回请求的状态号200: "OK"403: "Forbidden"404: "Not Found"如需完整列表请访问 Http 消息参考手册
statusText	返回状态文本（比如 "OK" 或 "Not Found"）

向服务器发送请求：

如需向服务器发送请求，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

方法	描述
open(method, url, async)	规定请求的类型method：请求的类型：GET 还是 POSTurl：服务器（文件）位置async：true（异步）或 false（同步）
send()	向服务器发送请求（用于 GET）
send(string)	向服务器发送请求（用于 POST）

选择GET 还是 POST：

GET 比 POST 更简单更快，可用于大多数情况下。

不过，请在以下情况始终使用 POST：

• 缓存文件不是选项（更新服务器上的文件或数据库）

• 向服务器发送大量数据（POST 无大小限制）

• 发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

一个GET请求例子，但是会获得一个缓存的结果：//post请求写法相同

<!DOCTYPE html>
<html>
<body>
​
<h1>XMLHttpRequest 对象</h1>
​
<button type="button" onclick="loadDoc()">请求数据</button>
​
<p id="demo"></p>
​
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {   //定义当请求接收到应答时所执行的函数
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/demo/demo_get.asp", true);//open() 方法的 url 参数，是服务器上文件的地址
  xhttp.send();                 //如需异步发送请求，open() 方法的 async 参数必须设置为 true：
}
</script>
​
</body>
</html>

为了避免此情况，向 URL 添加一个唯一的 ID：

<!DOCTYPE html>
<html>
<body>
​
<h1>XMLHttpRequest 对象</h1>
​
<button type="button" onclick="loadDoc()">请求数据</button>
​
<p>单击该按钮几次以查看时间是否已更改，或文件是否已缓存。</p>
​
<p id="demo"></p>
​
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange=function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/demo/demo_get.asp?t=" + Math.random(), true);
  xhttp.send();
}
</script>
​
</body>
</html>

一个GET发送例子

<!DOCTYPE html>
<html>
<body>
​
<h1>XMLHttpRequest 对象</h1>
​
<button type="button" onclick="loadDoc()">请求数据</button>
​
<p id="demo"></p>
​
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/demo/demo_get2.asp?fname=Bill&lname=Gates", true);
  xhttp.send();
}
</script>
 
</body>
</html>

但是通过post，如需像 HTML 表单那样 POST 数据，通过 setRequestHeader() 添加一个 HTTP 头部。在 send() 方法中规定需要发送的数据：

<body>
​
<h1>XMLHttpRequest 对象</h1>
​
<button type="button" onclick="loadDoc()">请求数据</button>
​
<p id="demo"></p>
 
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "/demo/demo_post2.asp", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("fname=Bill&lname=Gates");
}
</script>
​
</body>
</html>

4.服务器响应

onreadystatechange 属性：

readyState 属性存留 XMLHttpRequest 的状态。

onreadystatechange 属性定义当 readyState 发生变化时执行的函数。

status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态。

属性	描述
onreadystatechange	定义了当 readyState 属性发生改变时所调用的函数。
readyState	保存了 XMLHttpRequest 的状态。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 正在处理请求4: 请求已完成且响应已就绪
status	200: "OK"403: "Forbidden"404: "Page not found"如需完整列表，请访问 Http 消息参考手册
statusText	返回状态文本（例如 "OK" 或 "Not Found"）

服务器响应属性

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

服务器响应方法

方法	描述
getResponseHeader()	从服务器返回特定的头部信息
getAllResponseHeaders()	从服务器返回所有头部信息

responseText 属性：

responseText 属性以 JavaScript 字符串的形式返回服务器响应，因此可以这样使用它：

responseXML 属性：

XML HttpRequest 对象有一个內建的 XML 解析器。

ResponseXML 属性以 XML DOM 对象返回服务器响应。

使用此属性，可以把响应解析为 XML DOM 对象：

<h1>XMLHttpRequest 对象</h1>
​
<p id="demo"></p>
 
<script>
var xhttp, xmlDoc, txt, x, i;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    xmlDoc = this.responseXML;
    txt = "";
    x = xmlDoc.getElementsByTagName("ARTIST");
    for (i = 0; i < x.length; i++) {
      txt = txt + x[i].childNodes[0].nodeValue + "<br>";
    }
    document.getElementById("demo").innerHTML = txt;
  }
};
xhttp.open("GET", "/demo/music_list.xml", true);
xhttp.send();
</script>
​
</body>
</html>

getAllResponseHeaders() 方法：

getAllResponseHeaders() 方法返回所有来自服务器响应的头部信息。

<!DOCTYPE html>
<html>
<body>
​
<h1>XMLHttpRequest 对象</h1>
​
<p>getAllResponseHeaders() 函数返回资源的所有头信息，如长度，服务器类型，内容类型，最后修改等：</p>
​
<p id="demo"></p>
​
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML =
    this.getAllResponseHeaders();
  }
};
xhttp.open("GET", "/demo/js/ajax_info.txt", true);
xhttp.send();
</script>
​
</body>
</html>

getResponseHeader() 方法：

getResponseHeader() 方法返回来自服务器响应的特定头部信息。

<!DOCTYPE html>
<html>
<body>
​
<h1>XMLHttpRequest 对象</h1>
​
<p>getResponseHeader() 函数返回资源的特定头信息，如长度，服务器类型，内容类型，最后修改等：</p>
​
<p>最后修改时间：<span id="demo"></span></p>
​
<script>
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML =
    this.getResponseHeader("Last-Modified");
  }
};
xhttp.open("GET", "/demo/js/ajax_info.txt", true);
xhttp.send();
</script>
​
</body>
</html>

5.AJAX 可用于同 XML 文件进行交互式通信。

当用户点击“获取 CD 信息”按钮时，执行 loadDoc() 函数。

loadDoc() 函数创建 XMLHttpRequest 对象，添加当服务器响应就绪时执行的函数，并向服务器发送请求。

当服务器响应就绪后，构建 HTML 表格，从 XML 文件提取节点（因素），最后使用由 XML 数据填充的 HTML 表格对元素“demo”进行更新：

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>
​
<h1>XMLHttpRequest 对象</h1>
​
<button type="button" onclick="loadDoc()">获取我的音乐列表</button>
<br><br>
<table id="demo"></table>
​
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xhttp.open("GET", "/demo/music_list.xml", true);
  xhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>艺术家</th><th>曲目</th></tr>";
  var x = xmlDoc.getElementsByTagName("TRACK");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}
</script>
​
</body>
</html>