JavaWeb AJAX
1、 Asynchronized JavaScript And XML
异步JavaScript和XML,它并不是一门新的语言或技术,实际是几项技术按一定的方式组合在一起共同的协作中发挥各自的作用,它包含:
- 使用XHTML和CSS标准化呈现;
- 使用DOM实现动态显示和交互;
- 使用XML和XSLT进行数据交换与处理;
- 使用XMLHttpRequest进行异步数据读取;
- 使用JavaScript绑定和处理数据。
简单的说,AJAX是一种Web交互的新方法。
2、 包含了JS,XML,CSS,HTML,XSTL,DOM,XMLHttpRequest七种技术,AJAX把这已有的七种技术整合在一起,发挥出各个技术的优势,老技术,新思想。
3、 AJAX的特点:
- 不需要刷新页面就可以改变页面内容,减少用户等待时间;
- 改善表单验证方式,不需要打开新页面也不再需要将页面数据提交;
- 按需获取数据,每次只从服务器端获取需要的数据;
- 读取外部数据,进行数据处理整合;
- 异步与服务器进行交互,在交互过程中用户无需等待,仍可继续操作。
4、 AJAX的工作原理:
AJAX模型在浏览器中整合了一个中间层(AJAX引擎)来处理浏览器和服务器之间的通信。传统Web交互请求和响应的都是页面,AJAX请求和响应的都是数据。
5、 AJAX应用于只需改变数据而不改变页面的场景。
6、 AJAX优势:
- AJAX的根本理念是“按需取数据”,大大降低了数据的实际读取量;
- 无需刷新更新页面,通过异步发送请求,避免频繁刷新页面,减少用户等待时间,给用户一种连续体验;
- AJAX技术可以将传统的服务器工作转嫁到客户端,从而减轻服务器和带宽的负担,节约资源;
- AJAX基于标准化技术,集合所有浏览器都支持这种技术,无需下载插件或虚拟机程序。
7、 AJAX开发五步骤:
- 建立XMLHttpRequest对象;
- 设置回调函数;
- 使用open方法与服务器建立链接;
- 向服务器端发送数据;
- 在回调函数针对不同响应状态进行处理。
8、 XMLHttpRequest(XHR)对象,用来处理发送请求和响应,必须用JavaScript创建。IE浏览器和其他浏览器创建XHR对象方式不同,需做判断。具有如下8种属性:
onreadystatechange、readyState、responseText、responseXML、status
responseBody、responseStream、statusText
9、 readyState属性一共有5种取值:
- 0:请求没有发出(在调用open()函数之前);
- 1:表示请求已经建立但还没有发出(调用send()之前);
- 2:表示请求已经发出正在处理之中(这里通常可以从响应得到内容头部);
- 3:表示请求已经处理,正在接收服务器信息,响应中通常有部分数据可用,但服务器还未完成响应;
- 4:响应已经完成,可以访问服务器响应并使用它。
10、 XHR对象中的方法:
- open()将创建一个HTTP请求,并制定请求模式;
- send()将创建的请求发送到服务器端,并接收回应信息;
- abort() 取消发送的请求
- getAllResponseHeaders()
- getResponseHeader
- setRequestHeader()
11、 jQuery AJAX主要包括对ajax(),get(),post(),load(),getScript(),getJSON()等几种常用无刷新操作方法的掌握。
- load(url):载入远程HTML文件代码并插入DOM中,默认使用get方式,传递参数时自动转换为post方式。参数url:要载入的远程url地址;可选参数data:发给服务器的数据;可选参数callback:载入成功的回调函数;
- get(url,[data],[callback]):使用get方式从服务器端获取数据;
- post(url,[data],[callback]):使用post方式从服务器端获取数据;
- getScript(url,[callback]):通过get方式请求载入并执行一个JavaScript文件;
- getJSON(url,[data],[callback]):通过get方式获取json格式的数据。
- ajax():jQuery封装AJAX的最底层方法,可以处理任何简单或复杂的ajax请求。该方法只有一个参数,包含配置及回调函数信息。
12、 JSON,最重要的是理解它是一种数据格式,不是一种编程语言。
一种轻量级的数据交换格式,经常用于服务器和客户端传输数据。
数据在键值对中;数据由逗号分隔;花括号保存对象;方括号保存数组;
JSON值可以是number,string””,boolean, null, array[],object{},。
var peo={name:XXX,age:XXX}
- JSON中字符串必须使用双引号;
- JSON对象没有申明变量,没有末尾的分号;
- JSON数组存放的可以是不同类型的数据,而且可以和对象可以结合起来;
- 可以把JSON数据结构解析为有用的JS对象;
13、 JS中包含一个全局对象JSON,该对象有两个方法:
stringify():用于把JS对象序列化为JSON的字符串;
parse():用于把JSON字符串解析为原生的JS值。
14、遍历对象$.each(mapName,function(key,value){
});
JavaWeb AJAX的更多相关文章
- 14.javaweb AJAX技术详解
一.简介 1, ajax:在不重新加载网页的前提下,与服务器交换数据并更新部分网页的技巧,但其本身并不是一种新技术 2, 核心:XMLHttpRequest对象.AJAX技术主要是通过此对象完成的 ...
- JavaWeb——Ajax与MVC学习总结
Ajax: 什么是Ajax? 为什么使用Ajax? 使用jquery Ajax实现登录 Ajax实例练习: 设计模式 设计模式的定义: 设计模式的作用: MVC设计模式 MVC设计模式的模块组成: M ...
- Java初中级程序员面试题宝典
Java基础部分 &与&&区别? &和&&都是逻辑运算符,都是判断两边同时真则为真,否则为假:但是&&当第一个条件不成之后,后面的条件都 ...
- javaWeb项目(SSH框架+AJAX+百度地图API+Oracle数据库+MyEclipse+Tomcat)之一 基础Struts框架搭建篇
即将开始着手写这个项目,所以希望通过这篇博客来记录自己学习的过程 今天开学第一天,就上了软件工程实践课,自己也开始着手做这个大作业了.首先我的项目名称叫做智能班车管理系统. 项目的概况: 该软件产品是 ...
- javaWeb中使用ajax上传文件
javaWeb上传图片 上传文件所必要的两个jar包:commons-fileupload.jar.commons-io.jar. jar包下载:github路径 核心代码: String withP ...
- javaweb局部刷新-ajax异步请求springMVC显示返回的jsp内容,代替iframe
在jsp上要引入jquery <script src="<%=request.getContextPath()%>/js/jquery_ui/jquery.js" ...
- javaweb 解决将ajax返回的内容用document.write写入,FireFox一直加载的问题
在document.write方法后加上document.close就解决了, 想知道原理的小伙伴可以继续看 浏览器在解析html时会打开一个流,这是用document.write中写入,是加入当解析 ...
- JavaWeb笔记——ajax异步请求
1. ajax是什么? * asynchronous javascript and xml:异步的js和xml * 它能使用js访问服务器,而且是异步访问 * 服务器给客户端的响应一般是 ...
- JavaWeb之Ajax
一.什么是Ajax 1.1.Ajax的定义 Ajax:(Asynchronous JavaScript And XML)指异步 JavaScript 及 XML 不是一种新的编程语言,而是一种用于创建 ...
随机推荐
- Spring MVC视图解析器
Spring MVC提供的视图解析器使用ViewResolver进行视图解析,实现浏览器中渲染模型.ViewResolver能够解析JSP.Velocity模板.FreeMarker模板和XSLT等多 ...
- 公钥私钥和RSA算法
1, RSA算法原理(一) http://www.ruanyifeng.com/blog/2013/06/rsa_algorithm_part_one.html 2, RSA算法原理(二) http: ...
- 今天学的是 HTML基本元素、基本语法元素特点等,就发图片吧。
现在我们新手用的软件是:Adobe Dreamweaver CS6 按照下面格式来改,以后点HTML5直接就改过来了. 可以敲敲这些代码,大家一起学习. <!doctype html>&l ...
- chrome的常用快捷键和命令
常见快捷键 F12 打开Chrome控制台 Ctrl+J 进入"下载内容"页面 Ctrl+H 查看"历史记录"页面 Ctrl+D 将此页加入书签 Ctrl+F ...
- 水平垂直居中div(css3)
一.在需要居中的元素加上如下C3属性即可: <!doctype html><html lang="en"><head> <meta cha ...
- Myeclipse出现 java文件中文乱码问题
一.将整个project设置编码UTF-8(UTF-8可以最大的支持国际化) windows->Preferences->general->Workspace->Text fi ...
- 译\Node.js应用的持续部署
Node.js应用的持续部署 翻译前 翻译自:https://blog.risingstack.com/continuous-deployment-of-node-js-applications/ 正 ...
- Android中文TTS
如今在Android中开发中文语音播报有各式各样的云服务.SDK.API等云云,但是大部分服务是需要联网支持来进行语音合成的,在中文语音合成方面,科大讯飞无疑是佼佼者,而且它也提供了离线语音合成包(需 ...
- Hook机制里登场的角色
稍有接触过 WordPress 主题或插件制作修改的朋友,对 WordPress 的Hook机制应该不陌生,但通常刚接触WordPress Hook 的新手,对其运作原理可能会有点混乱或模糊.本文针对 ...
- iOS - AliPay 支付宝支付
1.支付宝支付申请 支付宝支付官方签约集成指引 支付宝APP支付官方集成指引 蚂蚁金服开放平台 1.1 支付宝 APP 支付申请步骤 APP 支付:APP 支付是商户通过在移动端应用 APP 中集成开 ...