html和ajax通信,使用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 += '
'+obj.name+''+obj.color+'
'
}
}
}
})
}
};
//事件监听器,监听鼠标单击事件后调用函数并请求JSON数据文件
searchField.addEventListener("click",search.salad,false);
})();
Ajax 所对应的HTML文档:
制作沙拉所需要的食材
搜索食材
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html和ajax通信,使用Ajax与服务器(JSON)通信实例相关推荐
- 页面上传图片只能通过表单完成,且页面端向服务器端发送消息除了ajax外基本通过表单;通过JavaScript ajax代码只能post到服务器json与xml;...
见标题 转载于:https://www.cnblogs.com/donlxn/archive/2012/07/11/2586691.html
- Android解析服务器Json数据实例
Json数据信息如下: {"movies": [{"movie": "Avengers","year": 2012,&q ...
- javascript --- 使用ajax与服务器进行通信
Ajax: (Asynchronous JavaScript and XML,异步JavaScript与XML技术)是一种有效利用JavaScript和DOM的操作. 与传统HTTP请求的区别: Aj ...
- c#实现ajax通信:向后台发送JSON字符串,接收响应字符串,并转换为对象
全栈工程师开发手册 (作者:栾鹏) c#教程全解 c#实现ajax通信,通过向服务器后台发送json数据,接收响应数据提交给前台. 其中包含两个主要函数,发送数据,接收响应数据的Http请求响应函数. ...
- 【Ajax】实现网页与服务器之间的数据交互
Per aspera ad astra 循此苦旅,以觅繁星 通过这篇文章带你了解网页与服务器之间的数据交互的原理与使用方法. 一.服务器的基本概念 在实现数据交互之前先了解服务器的概念,有助于我们之后 ...
- 前端通信:ajax设计方案(五)--- 集成promise规范,更优雅的书写代码(改迭代已作废,移步迭代10)...
该迭代已作废,最新的请移步这里:https://www.cnblogs.com/GerryOfZhong/p/10726306.html 距离上一篇博客书写,又过去了大概几个月了,这段时间暂时离开了这 ...
- JavaScript通信之Ajax
表单提交 在HTML中提供了表单提交的功能,我们可以通过表单把数据从前台提交到后台,通过设置submit事件,可以为按钮或其它元素同样可以触发表单提交的事件 <body><form ...
- ajax向服务器上传文件,ajax 上传文件到服务器
ajax 上传文件到服务器 内容精选 换一换 安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器上分别安装 ...
- Ajax跨域访问Tomcat服务器
在学习jQuery的时候进行到AJax时,需要与服务器进行交互练习.我毫不犹豫的打开了我的Tomcat服务器运行起来,并使用普通的ajax方法访问运行中的服务器网址的时候,发现 XMLHttpRequ ...
最新文章
- Vue在Element UI下使用富文本框插件quill-editor(我个人不推荐用这个复杂的富文本插件)
- 阿里达摩院2020趋势第一弹:感知智能的“天花板”和认知智能的“野望”
- Arm 发布Mali多媒体套件,机器学习将不再是高端手机的专享
- VC2005与IE8的冲突解决
- Bag of Tricks for Efficient Text Classification论文阅读及实战
- opencv 头盔检测
- Java的知识点19——异常机制Exception
- 【技巧】解决win10的1803版本下,无法收到1809推送、从而无法更新到1903版本的问题。...
- Python基础实践-密码管理系统实例
- c语言中entern int x y,关于extern和int main()的结构有关问题
- 虚拟机 ubuntu10.04 安装 Mercury MW150U 无线网卡(AR9271芯片组)
- 关于在CVS下无法获取更新的解决方法!!!
- 如何提取左声道音频_TRS? TRRS? 正式录制前,您确保麦克风的音频线插对了吗?...
- 设计模式---解释器模式(C++实现)
- Udemy上Gephi教程笔记1
- 计算机的组策略在什么地方,Win10本地组策略在哪里,Win10怎么打开本地组策略编辑器?...
- 小说app源码,uni-app跨平台框架开发,一套代码双端运行,无差别
- 如何将EXCEL中的多个单元格内容合并在一个单元格内
- 一组绝对有益于科研的随想录(转载)
- SQL读取Excel数据
热门文章
- algorithm头文件下的next_permutation()
- 目标检测——如何让模型过拟合
- Python——如何获得字符串的唯一编码
- hihocoder第218周:AC自动机
- 无setup.exe情况下安装mysql5.7.28(win10)
- 度量分析之报告信息的四个层次:数据,信息,分析,措施
- selenium-webdriver——如何在启动firefox时加载扩展
- 火星人谚语系列之八:少读书,多思考
- remote connect openshift mysql
- LINQ体验(2)——C# 3.0新语言特性和改进(上篇)