Ajax与服务器(JSON)通信实例代码


Posted in Javascript onNovember 05, 2016

Ajax与服务器(JSON)通信

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目录下创建好了Salad.json文件,等待Ajax程序去调用它:

//ajax JSON Salad
var ingredient = {
  "fruit":[
    {
      "name" : "apple",
      "color" : "green"
    },
    {
      "name" : "tomato",
      "color" : "red"
    },
    {
      "name" : "peach",
      "color" : "pink"
    },
    {
      "name" : "pitaya",
      "color" : "white"
    },
    {
      "name" : "lettuce",
      "color" : "green"
    }
  ]
};

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

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

//输出ajax调用所返回的json数据

var request = getHTTPObject();

request.onreadystatechange = function(){

  "use strict";

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

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

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

//将其封装成一个供调用函数

function ajaxCall(dataUrl,outputElement,callback){
  "use strict";  //这是一段截取的js(ajax)代码

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

然后调用 ajaxCall():

//调用程序,我们将使用Ajax请求的JSON数据显示到HTML文档的某个区域中!
(function () {
  "use strict";

    //下面将给出DOM语句相对应的HTML代码
  var searchForm = document.getElementById("search-form"),
    searchField = document.getElementById("q"),
    getAllButton = document.getElementById("get-all"),
    target = document.getElementById("output");

  var search = {

    salad : function(event){

      var output = document.getElementById("output");
        //请求的JSON数据文件名,输出到HTML的区域,检索数据文件的核心function语句

      ajaxCall('data/ingredient.json','output',function(data){

        //searchValue为搜索条目,准备循环检索
        var searchValue = searchField.value,

          //找到食材条目(详见JSON数据文件)
          fruit = data.fruit,

          //统计水果的数量
          count = fruit.length,
          i;

        //阻止默认行为
        event.preventDefault();

        //初始化
        target.innerHTML = "";

        if(count > 0 || searchValue !==""){
          for(i = 0;i < count;i++){
            
            var obj = fruit[i],
              //将name与searchvalue值相匹配,如果值不等于 -1,那么就确定两者相匹配

              inItfount = obj.name.indexOf(searchValue);

            //将JSON中匹配的数据规范的写入到DOM
            if(isItfount != -1){
              target.innerHTML += '<p>'+obj.name+'<a href="mailto:" '+obj.color+'>'+obj.color+'</a></p>'
            }
          }
        }
      })
    }
  };
  //事件监听器,监听鼠标单击事件后调用函数并请求JSON数据文件
  searchField.addEventListener("click",search.salad,false);
  
})();

Ajax 所对应的HTML文档:

<h1>制作沙拉所需要的食材</h1>

  <form action="" method="get" id="search-form">

    <div class="section">

      <label for="q">搜索食材</label>
      <input id="q" name="q" required placeholder="type a name">
    </div>


    <div class="button-group">

      <button type="submit" id="btn-search">搜索</button>
      <button type="button" id="get-all">get all contacts</button>

    </div>

  </form>

  <div id="output"></div>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 #Javascript
Javascript 函数的四种调用模式
Nov 05 #Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 #Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 #Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 #Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 #Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 #Javascript
You might like
Zend Guard一些常见问题解答
2008/09/11 PHP
PHP中串行化用法示例
2016/11/16 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
js实现批量删除功能
2020/08/27 Javascript
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
基于Python List的赋值方法
2018/06/23 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
pandas 对group进行聚合的例子
2019/12/27 Python
长青弘远的面试题
2012/06/09 面试题
餐厅执行经理岗位职责范本
2014/02/26 职场文书
租赁协议书范本
2014/04/22 职场文书
合作协议书范本
2014/10/25 职场文书
贷款担保书
2015/01/20 职场文书
高校教师个人总结
2015/02/10 职场文书
小升初自荐信范文
2015/03/05 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers