简单AJAX请求JSon数据

Posted 2020-09-18 pfr

Ajax 全名为Asynchronous javascript and XML（异步的 JavaScript 和 XML）。

它是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

在传统方法中，当我们需要向服务器请求数据时，浏览器需要等待该请求完成之后才能够进行下一步的操作，而在此之前是不能够对网页进行其他的操作，如果因请求的数据过大或者网络延迟等原因而造成的等待服务器响应的时间过久，无疑会使得用户的体验感降低，甚至有可能直接导致程序挂起。

而如果我们采用AJax技术，则可以避免这种情况的发生，对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

• 在等待服务器响应时执行其他脚本
• 当响应就绪后对响应进行处理

XMLHttpRequest 是 AJAX 的基础。 

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建 XMLHttpRequest 对象的语法：

var iable=new XMLHttpRequest();

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

var iable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

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");
  }

向服务器发送请求：

我们可以利用XMLHttpRequest的open(method,url,async)和send(string)方法向服务器发送请求。

其中open的三个参数分别是：规定请求的类型、URL 以及是否异步处理请求。

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

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

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

//示例代码
//get
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();
//post
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//为了能够像表单那样操作，需使用setRequestHeader方法
xmlhttp.send("fname=Bill&lname=Gates")//字符串只能用于post

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

send的string则是只能用于post。

完整示例代码（访问Yahoo的天气API，查看返回的JSON数据）：

// 实例化异步请求对象
var xhr = new XMLHttpRequest();
// 监听状态
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {//状态码200 -> ok
            var result = JSON.parse(xhr.responseText);
            console.log(result);
        }
    }
}
// 初始化请求
xhr.open(‘GET‘, ‘https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20%3D%202151330&format=json‘, true);
// 发送请求
xhr.send();