使用Ajax与服务器(JSON)通信实例


Posted in Javascript onNovember 04, 2016

 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 相关文章推荐
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
IE 下的只读 innerHTML
Aug 21 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 #Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 #Javascript
Angular页面间切换及传值的4种方法
Nov 04 #Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 #Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 #Javascript
javascript设置文本框光标的方法实例小结
Nov 04 #Javascript
使用Curl命令查看请求响应时间方法
Nov 04 #Javascript
You might like
Apache2 httpd.conf 中文版
2006/11/17 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
基于opencv实现简单画板功能
2020/08/02 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
代领报检证委托书范本
2014/10/11 职场文书
民事答辩状格式范文
2015/05/21 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
JavaScript实现简单计时器
2021/06/22 Javascript
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python
python缺失值填充方法示例代码
2022/12/24 Python