使用Ajax与服务器(JSON)通信实例
Ajax这个词,不代表任何东西,它仅仅是称呼一系列促进客户端与服务器通信的技术时所用的一个术语。服务器通信时Ajax技术的核心内容,其目标就是从客户端向服务器发送信息,并接受后者的回传,以求在此过程中创建出更好地打用户体验来。 Ajax之前所有的服务器通信都是在服务器上完成的,所以那是若想重绘页面的一部分,要么使用iframe(已淘汰),要么刷新整个页面。这两种方式都称不上是良好的用户体验。 Ajax提供了两类服务器通信手段:同步通信和异步通信。 异步通信Ajax比同步通信要常见的多了,大概是98%的使用频次。异步意味着此类Ajax调用并不和其他任务同时触发,这种通信行为发生在后台,具备相当的独立性,与页面和web应用程序相互分离。 使用异步调用,可以避免同步调用的阻塞性,它不需要与页面中的其他HTTP请求挤在一起处理。 XMLHttpRequest对象 XMLHttpRequest对象是所有Ajax调用的核心。我们的目的是使用Ajax技术异步获取JSON中的数据,并以适当的形式将其展现出来: function getHTTPObject(){
"use strict"; //注意使用严格模式 var xhr; //使用主流的XMLHttpRequest通信服务器对象 if(window.XMLHttpRequest){
//如果是老版本ie,则只支持Active对象
} //将通信服务器对象返回 } 跨浏览器的兼容问题:微软Ie起初发明了XMLHttp对象,那就导致了IE5、IE6只支持ActiveXObject对象,所以要考虑对它的兼容问题。 创建Ajax调用 首先,我在本地的data目录下创建好了Salad.json文件,等待Ajax程序去调用它: 然后要做的是向服务器发送请求和接受传回的数据: 在接收到返回的服务器通信对象“xhr”后,我们紧接着要做的是使用readystatechange 事件对通信对象 “xhr”进行 Ajax请求状态和服务器状态,当readystate状态请求完成和status状态服务器正常时在进行之后 的通信工作。 var request = getHTTPObject();
request.onreadystatechange = function(){ "use strict";
if(request.readyState ===4 || request.status ===200 ){
} //使用GET方式请求.json数据文件,并且不向服务器发送任何信息 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(); outputElement.innerHTML = "Loding..."; //也可以根据各位的需求添加一个循环小动画 request.onreadystatechange = function () {
}; request.open("GET",true); 然后调用 ajaxCall(): //下面将给出DOM语句相对应的HTML代码
var searchForm = document.getElementById("search-form"),searchField = document.getElementById("q"),getAllButton = document.getElementById("get-all"),target = document.getElementById("output"); var search = {
}; })(); Ajax 所对应的HTML文档: 制作沙拉所需要的食材
<form action="" method="get" id="search-form">
<div id="output"> 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |