Ajax与服务器（JSON）通信介绍

本文主要介绍使用Ajax与服务器（JSON）通信方法，谈谈Ajax提供的两类服务器通信手段：同步通信和异步通信。有需要的可以了解一下。毕竟这个时代出了很多东西，自动化构建工具，mvvm框架等等。JavaScript中的ajax通信大家多多少少都应该做些了解。

 Ajax这个词，不代表任何东西，它仅仅是称呼一系列促进客户端与服务器通信的技术时所用的一个术语。服务器通信时Ajax技术的核心内容，其目标就是从客户端向服务器发送信息，并接受后者的回传，以求在此过程中创建出更好地打用户体验来。

Ajax之前所有的服务器通信都是在服务器上完成的，所以那是若想重绘页面的一部分，要么使用iframe（已淘汰），要么刷新整个页面。这两种方式都称不上是良好的用户体验。

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

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

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

XMLHttpRequest对象

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

//创建ajax通信服务器对象
 
function getHTTPObject(){
 
  "use strict"; //注意使用严格模式
 
  var xhr;
 
  //使用主流的XMLHttpRequest通信服务器对象
 
  if(window.XMLHttpRequest){
 
    xhr = new window.XMLHttpRequest();
 
  //如果是老版本ie，则只支持Active对象
  } else if(window.ActiveXObject){
 
    xhr = new window.ActiveXObject("Msxml2.XMLHTTP");
  }
 
  //将通信服务器对象返回
  return xhr;
 
}

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

创建Ajax调用

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

var result= {
  "data":[
    {
      "name" : "David",
      "age" : "15"
    },
    {
      "name" : "Maria",
      "age" : "18"
    },
    {
      "name" : "dainty",
      "age" : "19"
    },
    {
      "name" : "klin",
      "age" : "16"
    },
    {
      "name" : "lettuce",
      "color" : "green"
    }
  ]
};

接着我们要向服务器发送请求和接受传回的数据：

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

/输出ajax调用所返回的json数据
 
var request = getHTTPObject();
 
request.onreadystatechange = function(){

 
    //当readyState全等于“4”状态，status全等于“200”状态 代表服务器状态服务及客户端请求正常，得以返回
  if(request.readyState ===4 || request.status ===200 ){
     
    //将数据打印到浏览器console控制台
    console.log(request.responseText);
  }
   
  //使用GET方式请求.json数据文件，并且不向服务器发送任何信息
  request.open("GET","data/data.json",true);
  request.send(null);
};

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

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

//传入四个参数 method：两种分式分get，post。url：你要获取数据的链接。data就是你要配置的参数，success：就是成功处理事件。下面怎么处理就不介绍了，比较简单.就不一一注释了。
function ajax(method, url, data, success) {
    var xhr = null;
           //兼容处理
    try {
        xhr = new XMLHttpRequest();
    } catch (e) {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //get方式跟配置参数传递
    if (method == 'get' && data) {
        url += '?' + data;
    }
    
    xhr.open(method,url,true);
    if (method == 'get') {
        xhr.send();
    } else {
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }
    
    xhr.onreadystatechange = function() {
        
        if ( xhr.readyState == 4 ) {
            if ( xhr.status == 200 ) {
                success && success(xhr.responseText);
            } else {
                alert('出错了,Err：' + xhr.status);
            }
        }
        
    }
}

//上面大家可能看的比较简单，我特意去找了一个给大家看看
 
function ajaxCall(dataUrl,outputElement,callback){
 
  var request = getHTTPObject();
  //我想要提醒大家的是：当网页的某个区域在向服务器发送http请求的过程中，要有一个标识提醒用户正在加载...
 
  outputElement.innerHTML = "Loding..."; //也可以根据各位的需求添加一个循环小动画
 
  request.onreadystatechange = function () {
 
    if(request.readyState ===4 || request.status ===200){
 
      //将request.responseText返回的数据转化成JSON格式
      var contacts = JSON.parse(request.responseText);
       
      //如果回调函数是function类型，则使用callback函数处理返回的JSON数据
      if(callback === "function"){
        callback(contacts);
      }
    }
  };
 
  request.open("GET","data/ingredient.json",true);
  request.send(null);
}

这个是对应第一个ajax的小demo

需要一个php文件做一下异步处理

<?php
header('Content-type:text/html; charset="utf-8"');

/*
API:
    getPics.php

        参数
        cpage : 获取数据的页数
*/
$cpage = isset($_GET['cpage']) ? $_GET['cpage'] : 1;

$url = 'http://www.wookmark.com/api/json/popular?page=' . $cpage;

$content = file_get_contents($url);
$content = iconv('gbk', 'utf-8', $content);

echo $content;

?>

然后就是通过js进行处理。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body {margin: 0;}
#ul1 { 1080px; margin: 100px auto 0;}
li {  247px; list-style: none; float: left; margin-right: 10px; }
li div {border: 1px solid #000; padding: 10px; margin-bottom: 10px;}
li div img {  225px; display: block;}
</style>
<script src="ajax.js"></script>
<script>
window.onload = function() {
    
    var oUl = document.getElementById('ul1');
    var aLi = oUl.getElementsByTagName('li');
    var iLen = aLi.length;
    var iPage = 1;
    var b = true;
    
    //初始化数据处理
    getList();
    
    function getList() {
        ajax('get','getPics.php','cpage=' + iPage,function(data) {
        
            var data = JSON.parse(data);
            
            if ( !data.length ) {
                //后续没有数据了
                return ;
            }
            
            for ( var i=0; i<data.length; i++ ) {
                
                //获取高度最短的li
                var _index = getShort();
                
                var oDiv = document.createElement('div');
                var oImg = document.createElement('img');
                oImg.src = data[i].preview;
                oImg.style.width = '225px';
                oImg.style.height =  data[i].height * ( 225 / data[i].width ) + 'px';
                oDiv.appendChild( oImg );
                var oP = document.createElement('p');
                oP.innerHTML = data[i].title;
                oDiv.appendChild( oP );
                
                aLi[_index].appendChild( oDiv );
                
            }
            
            b = true;
            
        });
    }
    
    window.onscroll = function() {
        
        var _index = getShort();
        var oLi = aLi[_index];
        
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        
        if ( getTop( oLi ) + oLi.offsetHeight < document.documentElement.clientHeight + scrollTop ) {
            
            if ( b ) {
                b = false;
                iPage++;
                getList();
            }
            
        }
        
    }
    
    function getShort() {
        var index = 0;
        var ih = aLi[index].offsetHeight;
        for (var i=1; i<iLen; i++) {
            if ( aLi[i].offsetHeight < ih ) {
                index = i;
                ih = aLi[i].offsetHeight;
            }
        }
        return index;
    }
    
    function getTop(obj) {
        var iTop = 0;
        while(obj) {
            iTop += obj.offsetTop;
            obj = obj.offsetParent;
        }
        return iTop;
    }
    
}
</script>
</head>

<body>
    <ul id="ul1">
        <li></li>
          <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

看完了不过瘾，或者不了解嘛，那我们就用jQuery简单弄一个ajax

$.ajax({
    url:'./test1.php',
    type:'POST', //GET
    async:true,    //或false,是否异步
    data:{
        name:'yang',age:25
    },
    timeout:5000,    //设置超时时间
    dataType:'json',    //一般使用json，当需要异步处理使用jsonp。返回的数据格式：json/xml/html/script/jsonp/text
    beforeSend:function(xhr){
        console.log(xhr)
        console.log('发送前')
    },
    success:function(data,textStatus,jqXHR){
        console.log(data)
        console.log(textStatus)
        console.log(jqXHR)
    },
    error:function(xhr,textStatus){
        console.log('错误')
        console.log(xhr)
        console.log(textStatus)
    },
    complete:function(){
        console.log('结束')
    }
})

这是使用jq的方便，根据参数配置就搞定了。简洁方便，虽然现在jq已经不是主流了，但是很多思想值得我们借鉴学习的。