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 相关文章推荐
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
javascript常见用法总结
May 22 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
vue.js学习之递归组件
Dec 13 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
webpack的移动端适配方案小结
Jul 25 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
一个简单的PHP&amp;MYSQL留言板源码
2020/07/19 PHP
PHP的变量总结 新手推荐
2011/04/18 PHP
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
php常用表单验证类用法实例
2015/06/18 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
决定成败的关键——创业计划书
2014/01/24 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
暑期社会实践证明书
2014/11/17 职场文书
如何写好活动总结
2019/06/21 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书