6.Ajax和JSON

6.Ajax和JSON 16:56

思维导图.png

1.服务器的安装

JSON 文件被放置在服务器端,客户端请求该文件用得最多的是 Ajax,能够实现异步请求。

服务器推荐:
Apache:http://httpd.apache.org/
我使用:WarmServer
访问本地服务器,地址栏输入:127.0.1/ajax/
由于我修改了WarmServer的端口号,

端口查看.gif

所以我的电脑要打开此网址:http://localhost:8080/ajax/

2. Ajax 是什么

  • AJAX,全称 Asynchronous JavaScript and XML,即“异步的 JavaScript 和 XML”,一般写作 Ajax。

  • Ajax 能够与服务器交换 少量 数据,从而异步地更新部分网页。

  • 异步,指的是当 Ajax 执行交换数据的操作时,其他的操作仍然可以执行。

  • 一个最常见的应用是:打开百度或谷歌首页,当输入文字后,搜索栏下方会显示出几个建议的搜索词。这正是 Ajax 的应用。

3. 创建和使用 Ajax

创建 Ajax 对象要考虑浏览器的版本问题,主要分为两大类:IE7+/Chrome/Firefox/… 和 IE6/IE5.。

function CreateXHR(){
    if (window.XMLHttpRequest)
    {
        //对浏览器 IE7+, Firefox, Chrome, Opera, Safari
        return new XMLHttpRequest();
    }
    else
    {
        //对浏览器 IE6, IE5
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

//然后,只要用如下方式创建即可。

var xmlhttp; 
 
xmlhttp = CreateXHR();

//服务器端有一个文件 test.json,请求并输出。

xmlhttp.open("GET","test.json",true); //true-是否使用异步请求:是;//test.json要加双引号
xmlhttp.send();
 
//响应函数
xmlhttp.onreadystatechange = function(){
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        var jsonstr = xmlhttp.responseText;
        console.log(jsonstr);
    }
}

其中,xmlhttp.readyState 存有 XMLHttpRequest 的状态,有五个值:

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪

xmlhttp.status 的值为请求结果,200 表示“OK”,404 表示未找到页面。

获取来自服务器的响应,可使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性,前者是以字符串形式,后者是以 XML 形式。

4、案例效果图:

文档结构图:

文档结构图.gif

1)要求:服务器端有一个文件test.json,使用Ajax发送请求给服务器端,获取到该文件的内容,并将它们输出到控制台
test.json:

{
  "name": "Geoff Lui",
  "age": 26,
  "friends": ["Alice", "Gwen", "Lucy"]
}
获取json文件.gif

2)要求:服务器端有一个文件test.xml,使用Ajax发送请求给服务器端,获取到该文件的内容,并将它们输出到控制台
test.xml:

<root>
  <name>Geoff Lui</name>
  <age>26</age>
  <friends>Alice</friends>
  <friends>Gwen</friends>
  <friends>Lucy</friends>
</root>
获取xml文件.gif

推荐阅读更多精彩内容