文档章节

jQuery与Ajax的应用

c
 cjy_lean
发布于 09/21 15:51
字数 1548
阅读 25
收藏 0

jQuery与Ajax的应用

Ajax

Ajax 即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,异步交互,传输的数据为XML.是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新,可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

什么叫同步,什么叫异步

同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;

异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。

XMLHttpRequest:该对象是对 JavaScript 的一个扩展,可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。实际上通常把Ajax当成XMLHttpRequest对象的代名词

AJAX的优缺点:

优点:使用js向服务器发送异步请求,无需刷新整个页面,服务器响应的内容是局部,性能高
 缺点:不是所有的场景都适合,更多的使用同步交互。服务器发送请求过多,导致服务器压力增大。兼容性问题,页面刷新不能后退。

Ajax工具包

服务器端语言:服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关;
XML (eXtensible Markup Language,可扩展标记语言) 是一种描述数据的格式。Aajx程序需要某种格式化的格式来在服务器和客户端之间传递信息,XML 是其中的一种选择;
XHTML(eXtended Hypertext Markup Language,使用扩展超媒体标记语言)和 CSS(Cascading Style Sheet,级联样式单)标准化呈现;
DOM(Document Object Model,文档对象模型)实现动态显示和交互;
•使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取;
•使用JavaScript绑定和处理所有数据;
XMLHttpRequest
XMLHttpRequest AJAX的基础, 用于在后台与服务器交换数据
&创建XMLHttpRequest对象(由于非标准所以实现方法不统一
•Internet Explorer把XMLHttpRequest实现为一个ActiveX对象
•其他浏览器(Firefox、Safari、Opera…)把它实现为一个本地的JavaScript对象。
XMLHttpRequest在不同浏览器上的实现是兼容的 ,所以可以用同样的方式访问 XMLHttpRequest 实例的属性和方法。
 
创建 XMLHttpRequest对象要考虑版本问题
为了处理浏览器兼容问题,给出下面方法来创建 XMLHttpRequest 对象:
function createXMLHttpRequest() {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
	xmlHttp = new XMLHttpRequest();
} else { // code for IE6, IE5
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}

打开与服务器的连接(open方法)

当得到 XMLHttpRequest 对象后,就可以调用该对象的 open() 方法打开与服务器的连接了。 open() 方法的参数如下:
open(method, url , async )
method :请求方式,通常为 GET POST
url :请求的服务器地址,例如: / ajaxdemo / AServlet ,若为 GET 请求,还可以在 URL 后追加参数;
async :这个参数可以不给,默认值为 true ,表示异步请求;
//得到异步对象
var xmlHttp = createXMLHttpRequest();
//打开与服务器的连接
xmlHttp.open("GET", "<c:url value='/AServlet'/>", true);

发送请求

当使用 open 打开连接后,就可以调用 XMLHttpRequest 对象的 send() 方法发送请求了。 send() 方法的参数为 POST 请求参数,即对应 HTTP 协议的请求体内容,若是 GET 请求,需要在 URL 后连接参数,如果是POST,在send()属性传参数。
注意:若没有参数,需要给出 null 为参数!若不给出 null 为参数,可能会导致 FireFox 浏览器不能正常发送请求!
//发送请求
xmlHttp.send(null);

接收服务器响应

XMLHttpRequest对象有一个onreadystatechange事件,它会在XMLHttpRequest对象的状态发生变化时被调用。XMLHttpRequest对象的readyState属性表示状态变化,它有5种状态:
•0:初始化未完成状态,只是创建了XMLHttpRequest对象,还未调用open()方法;
•1:请求已开始,open()方法已调用,但还没调用send()方法;
•2:请求发送完成状态,send()方法已调用;
•3:开始读取服务器响应;
•4:读取服务器响应结束。
常用状态码及其含义:
404 没找到页面 (not found)
403 禁止访问 (forbidden)
500 内部服务器出错 (internal service error)
200 一切正常 (ok)
304 没有被修改 (not modified)
接收服务器响应
通过XMLHttpRequest对象的responseTextresponseXML得到服务器响应内容。

readyState属性变成4, responseText属性才可用,表明Ajax请求已经结束

xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
	var text = xmlHttp.responseText;
	var div= document.getElementById(“msg");
	div.innerHTML = text;
}
}

发送POST请求

POST 请求向服务器发送数据,需要将“Content-type”请求头设置为 “application/x-www-form-urlencoded,它会告知服务器正在发送数据,并且数据已经符合URL编码了

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

在使用AJAX发送POST请求时,需要设置这一请求头,然后使用send()方法来设置请求体内容

xmlHttp.send("b=B");

JSON格式

数据格式(共同语言)数据交互

JSON是一种请轻量级的数据交换格式(字符串)[Json数据就是按照一定规范排列的字符串]

格式:

数据在名称 / 值对中
数据由逗号分隔
花括号保存对象
方括号保存 数组

注意,key也要在双引号中

步骤:

1.加入jar包,通过jar中的工具类,将对象转化成json数据

2.JavaScript通过eval()这个方法来将json格式的字符串转化成为JavaScript对象

 

 

 

© 著作权归作者所有

c
粉丝 1
博文 8
码字总数 13744
作品 0
广州
私信 提问
帮助你高效开发Ajax应用的超酷jQuery插件 - AjaxML

日期:2012-4-20 来源:GBin1.com 如果你使用jQuery进行Ajax开发的话,你一定要试试今天我们这里介绍的这一款jQuery插件 - AjaxML。它是一款能够帮助你提高ajax开发效率的辅助插件,能够将你...

gbin1
2012/04/24
104
0
240多个jQuery插件(1)

文件上传(File upload) Ajax File Upload. jQUploader. Multiple File Upload plugin. jQuery File Style. Styling an input type file. Progress Bar Plugin. 表单验证(Form Validation) j......

五味格子
2011/05/11
172
0
240个jQuery实现AJAX插件分享给大家

概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的,它兼容 CSS3,还兼...

MIANHUC
2016/03/05
784
2
[转]240多个jQuery插件

Query 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的,它兼容 CSS3,还兼容各种...

穿越星辰
2010/05/13
2.2K
0
[IBM DW] 在 CodeIgniter 中使用 jQuery

CodeIgniter 是使用 PHP 编写的一款流行的轻量级开源框架,基于 Model-View-Controller (MVC) 架构模式。jQuery 是快速、轻量级、开源 JavaScript 库,专门用于简化 HTML 页面操作和 Ajax 集...

红薯
2010/12/08
2.6K
4

没有更多内容

加载失败,请刷新页面

加载更多

sync.Mutex 互斥锁

说明: 互斥锁用来保证在任一时刻,只能有一个例程访问某对象。Mutex 的初始值为解锁状态。Mutex 通常作为其它结构体的匿名字段使用,使该结构体具有 Lock 和 Unlock 方法。Mutex 可...

李琼涛
15分钟前
5
0
自建redis笔记

自建redis笔记 最近在linux安装了一下redis,特做一些笔记! 本文先单节点启动redis,然后再进行持久化配置,在次基础上,再分享搭建主从模式的配置以及Sentinel 哨兵模式及集群的搭建 单节点...

北极之北
18分钟前
3
0
扛住阿里双十一高并发流量,Sentinel是怎么做到的?

Sentinel 承接了阿里巴巴近 10 年的双十一大促流量的核心场景 本文介绍阿里开源限流熔断方案Sentinel功能、原理、架构、快速入门以及相关框架比较 基本介绍 1 名词解释 服务限流 :当系统资源...

分布式系统架构
19分钟前
4
0
事假杨晨龙(Z16021)月薪请假单

svn co URL --username xxx-- password yyy ./

桃花飞舞
43分钟前
4
0
当Activity关闭后,网络请求回调的处理

当我们在使用网络请求的时候,一般都是通过回调来获取请求到的数据。对于网络请求的回调需要注意的几个点 比如我们的回调在Activity中处理数据,当我们把Activity关闭后,如果获取到数据时,...

shzwork
44分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部