使用Ajax与服务器（JSON）通信

Posted 2020-08-17 画个女孩陪着我

Ajax这个词，不代表任何东西，它仅仅是称呼一系列促进客户端与服务器通信的技术时所用的一个术语。服务器通信时Ajax技术的核心内容，其目标就是从客户端向服务器发送信息，并接受后者的回传，以求在此过程中创建出更好地打用户体验来。Ajax之前所有的服务器通信都是在服务器上完成的，所以那是若想重绘页面的一部分，要么使用iframe（已淘汰），要么刷新整个页面。这两种方式都称不上是良好的用户体验。

 

Ajax提供了两类服务器通信手段：同步通信和异步通信。

异步通信Ajax比同步通信要常见的多了，大概是98%的使用频次。异步意味着此类Ajax调用并不和其他任务同时触发，这种通信行为发生在后台，具备相当的独立性，与页面和web应用程序相互分离。

使用异步调用，可以避免同步调用的阻塞性，它不需要与页面中的其他HTTP请求挤在一起处理。

 

 

XMLHttpRequest对象

XMLHttpRequest对象是所有Ajax调用的核心。我们的目的是使用Ajax技术异步获取JSON中的数据，并以适当的形式将其展现出来：

 

 1 //创建ajax通信服务器对象
 2 
 3 function getHTTPObject(){
 4 
 5     "use strict";  //注意使用严格模式
 6 
 7     var xhr;
 8 
 9     //使用主流的XMLHttpRequest通信服务器对象
10 
11     if(window.XMLHttpRequest){
12 
13         xhr = new window.XMLHttpRequest();
14 
15     //如果是老版本ie，则只支持Active对象
16     } else if(window.ActiveXObject){
17 
18         xhr = new window.ActiveXObject("Msxml2.XMLHTTP");
19     }
20 
21     //将通信服务器对象返回
22     return xhr;
23 
24 }

 

 

跨浏览器的兼容问题：微软Ie起初发明了XMLHttp对象，那就导致了IE5、IE6只支持ActiveXObject对象，所以要考虑对它的兼容问题。

 

 

创建Ajax调用

首先，我在本地的data目录下创建好了Salad.json文件，等待Ajax程序去调用它：

 

 1 //ajax JSON Salad
 2 var ingredient = {
 3     "fruit":[
 4         {
 5             "name" : "apple",
 6             "color" : "green"
 7         },
 8         {
 9             "name" : "tomato",
10             "color" : "red"
11         },
12         {
13             "name" : "peach",
14             "color" : "pink"
15         },
16         {
17             "name" : "pitaya",
18             "color" : "white"
19         },
20         {
21             "name" : "lettuce",
22             "color" : "green"
23         }
24     ]
25 };

 

 

然后要做的是向服务器发送请求和接受传回的数据：

在接收到返回的服务器通信对象“xhr”后，我们紧接着要做的是使用readystatechange 事件对通信对象 “xhr”进行 Ajax请求状态和服务器状态，当readystate状态请求完成和status状态服务器正常时在进行之后 的通信工作。

 

 1 //输出ajax调用所返回的json数据
 2 
 3 var request = getHTTPObject();
 4 
 5 request.onreadystatechange = function(){
 6 
 7     "use strict";
 8 
 9         //当readyState全等于“4”状态，status全等于“200”状态 代表服务器状态服务及客户端请求正常，得以返回
10     if(request.readyState ===4 || request.status ===200 ){
11         
12         //为了方便起见，将数据打印到浏览器控制台（F12查看）
13         console.log(request.responseText);
14     }
15     
16     //使用GET方式请求.json数据文件，并且不向服务器发送任何信息
17     request.open("GET","data/ingredient.json",true);
18     request.send(null);
19 };

 

 

Ajax也通过GET和POST方法进行调用，GET方式会把数据暴露在URL之中，所以它的处理工作较少；POST相对较安全，但性能不如GET。   接下来分别使用 open()和 send()方法对服务器请求数据文件和发送数据。

 

通常在实际的开发项目中，不可能仅仅有一个Ajax调用。为了复用，为了方便起见，我们需要将这个Ajax程序封装成复用函数，在这里我传入了一个outputElement参数，用于给用户提示等待；还传入了一个callback参数，用于传入一个回调函数，根据用户在搜索框键入的关键字在JSON文件中进行匹配，将合适的数据渲染到页面响应的位置：

 

 1 //将其封装成一个供调用函数
 2 
 3 function ajaxCall(dataUrl,outputElement,callback){
 4     "use strict";   //这是一段截取的js（ajax）代码
 5 
 6     var request = getHTTPObject();
 7     //我想要提醒大家的是：当网页的某个区域在向服务器发送http请求的过程中，要有一个标识提醒用户正在加载...
 8 
 9     outputElement.innerhtml = "Loding..."; //也可以根据各位的需求添加一个循环小动画
10 
11     request.onreadystatechange = function () {
12 
13         if(request.readyState ===4 || request.status ===200){
14 
15             //将request.responseText返回的数据转化成JSON格式
16             var contacts = JSON.parse(request.responseText);
17             
18             //如果回调函数是function类型，则使用callback函数处理返回的JSON数据
19             if(callback === "function"){
20                 callback(contacts);
21             }
22         }
23     };
24 
25     request.open("GET","data/ingredient.json",true);
26     request.send(null);
27 }

 

 

然后调用 ajaxCall()：

 1 //调用程序，我们将使用Ajax请求的JSON数据显示到HTML文档的某个区域中！
 2 (function () {
 3     "use strict";
 4 
 5         //下面将给出DOM语句相对应的HTML代码
 6     var searchForm = document.getElementById("search-form"),
 7         searchField = document.getElementById("q"),
 8         getAllButton = document.getElementById("get-all"),
 9         target = document.getElementById("output");
10 
11     var search = {
12 
13         salad : function(event){
14 
15             var output = document.getElementById("output");
16                 //请求的JSON数据文件名，输出到HTML的区域，检索数据文件的核心function语句
17 
18             ajaxCall(‘data/ingredient.json‘,‘output‘,function(data){
19 
20                 //searchValue为搜索条目，准备循环检索
21                 var searchValue = searchField.value,
22 
23                     //找到食材条目（详见JSON数据文件）
24                     fruit = data.fruit,
25 
26                     //统计水果的数量
27                     count = fruit.length,
28                     i;
29 
30                 //阻止默认行为
31                 event.preventDefault();
32 
33                 //初始化
34                 target.innerHTML = "";
35 
36                 if(count > 0 || searchValue !==""){
37                     for(i = 0;i < count;i++){
38                         
39                         var obj = fruit[i],
40                             //将name与searchvalue值相匹配，如果值不等于 -1，那么就确定两者相匹配
41 
42                             inItfount = obj.name.indexOf(searchValue);
43 
44                         //将JSON中匹配的数据规范的写入到DOM
45                         if(isItfount != -1){
46                             target.innerHTML += ‘<p>‘+obj.name+‘<a href="mailto:" ‘+obj.color+‘>‘+obj.color+‘</a></p>‘
47                         }
48                     }
49                 }
50             })
51         }
52     };
53     //事件监听器，监听鼠标单击事件后调用函数并请求JSON数据文件
54     searchField.addEventListener("click",search.salad,false);
55     
56 })();

 

 

Ajax 所对应的HTML文档：

 1  <h1>制作沙拉所需要的食材</h1>
 2 
 3     <form action="" method="get" id="search-form">
 4 
 5         <div class="section">
 6 
 7             <label for="q">搜索食材</label>
 8             <input id="q" name="q" required placeholder="type a name">
 9         </div>
10 
11 
12         <div class="button-group">
13 
14             <button type="submit" id="btn-search">搜索</button>
15             <button type="button" id="get-all">get all contacts</button>
16 
17         </div>
18 
19     </form>
20 
21     <div id="output"></div>