jquery中ajax学习笔记3

摘要:
ajax学习1中介绍了使用jquery封装的ajax来接收服务器端的文本数据以及使用XMLHttpReques对象来接收服务器端的文本数据
ajax学习2中介绍了使用XMLHttpReques来接收服务器的端XML数据,本节主要介绍使用jqery封装的ajax使用XML格式接收服务器端的数据。

由于很多知识都已经做了详细介绍,本节只介绍需要修改的代码,使用jqery封装的ajax使用XML格式接收服务器端的数据,web.xml、后台的servet都不用改,
只是ajax.html中调用的方法名称修改一下,改为新增加的javascript方法。

用到的主要的一个方法介绍:
jQuery.ajax(options):通过HTTP请求加载远程数据,
返回值:XMLHttpRequest
参数:options(可选),ajax请求设置。所有选项都是可选的。
主要选项介绍:
type (String) : (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持
url (String) : (默认: 当前页地址) 发送请求的地址
data (Object,String) : 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后
dataType (String) : 预期服务器返回的数据类型。
如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:
"xml": 返回 XML 文档,可用 jQuery 处理。
"html": 返回纯文本 HTML 信息;包含 script 元素。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。
"json": 返回 JSON 数据
success (Function) : 请求成功后回调函数。参数:服务器返回数据,数据格式
error (Function) : (默认: 自动判断 (xml 或 html)) 请求失败时调用时间
async (Boolean) : (默认: true) 默认设置下,所有请求均为异步请求。
如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行

新增的javascript方法如下:


代码如下:

<!--用户名称的校验,采用jquery封装的ajax,接收XML格式的响应数据-->
//通过$.ajax()方法 通过HTTP请求加载远程数据
function verifyJqueryXML(){
var jqueryObj= $("#username");
var username= jqueryObj.val();
//javascript当中,一个简单的对象的定义方法
//var obj={name:"abc",age:20};
//使用jquery的XMLHTTPRequest对象的get请求的封装
$.ajax({
type:"POST",//请求方式
url:"AJAXXMLServer", //服务器端的url地址
data:"name="+username, // 发送给服务器端的数据
dataType:"xml", //告诉Jquery返回的数据格式
success:callback1 //定以交互完成,并且服务器端正确返回数据时调用的回调函数
}); //注意url和 dataType必须对应
}
function callback1(data){
//首先需要将dom的对象转换成Jquery对象
var jqueryObj=$(data);
//获取message节点
var message=jqueryObj.children();
//获取文本内容
var text=message.text();
//将服务器端的值动态的显示在页面上
var resultObj=$("#result");
resultObj.html(text);
}

通过以上代得到,ajax.html中的调用javascript方法名称应改为:verifyJqueryXML()

(0)

相关推荐

  • AJax 学习笔记二(onreadystatechange的作用)

    当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了onreadyStateChange事件实现这一功能.这类似于回调函数的做法.onreadyStateChange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果,如: 复制代码 代码如下: ajaxObj=createAjaxObject(); var url="/MyTodoes/FetchText?id="+id; ajaxOb

  • Ajax学习全套(最全最经典)

    ajax简介 AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.Ajax不是一种新的编程语言,而是使用现有标准的新方法.AJAX可以在不重新加载整个页面的情况下,与服务器交换数据.这种异步交互的方式,使用户单击后,不必刷新页面也能获取新数据.使用Ajax,用户可以创建接近本地桌面应用的直接.高可用.更丰富.更动态的Web用户界面. Ajax包括: •XHTML和CSS •使用文档对

  • IE关闭时判断及AJAX注销案例学习

    复制代码 代码如下: <script language="javascript"> window.onbeforeunload = function () { var n = window.event.screenX - window.screenLeft; var b = n > document.documentElement.scrollWidth - 20; if (b && window.event.clientY < 0 || win

  • AJax 学习笔记一(XMLHTTPRequest对象)

    现在很多公司都在做标准的静态页面,为了增强客户的体验效果,经常会涉及到AJax效果,而设计AJax使用的一种重要技术(工具)就是XMLHttpRequest对象了.今天学习了点关于XMLHttpRequest对象的一些方法和属性,有点体会,在这里也想记录起来. 1.何为XMLHttpRequest 定义:XMLHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API.XmlHttp最大的用处是可以更新网页的部分

  • 那些年,我还在学习Ajax 学习笔记

    通俗的说,Ajax就是一种网页无刷技术,以提高用户体验,Ajax并不是什么新的技术,只是在那些年才火了起来(Ajax火起来时,哥只知道聊QQ),所以它就备受观注:当然,那些年就开始学习了. 一.完成Ajax请求 1. 在完成这个请求之前,先来了解一下Ajax是什么,它的全名叫异步的javascript与.XML,从名称可以看出,它与javascript和XML有不解之缘,Ajax使用XML地HTTP请求,通过浏览器建立的xmlHttpRequest对象,异步的向服务器发送请求,服务器处理请求后,

  • Jquery Ajax学习实例 向页面发出请求,返回XML格式数据

    一.AjaxSample.aspx 处理业务数据,产生XML数据,供JqueryRequest.aspx调用,代码如下: 复制代码 代码如下: protected void Page_Load(object sender, EventArgs e) { string uid = Request.QueryString["username"]; string pwd = Request.QueryString["password"]; Response.Content

  • Ajax与JSON的一些学习总结

    1.1.1 摘要 Ajax技术的核心是XMLHttpRequest对象(简称XHR),可以通过使用XHR对象获取到服务器的数据,然后再通过DOM将数据插入到页面中呈现.虽然名字中包含XML,但Ajax通讯与数据格式无关,所以我们的数据格式可以是XML或JSON等格式. XMLHttpRequest对象用于在后台与服务器交换数据,具体作用如下: 在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在页面已加载后从服务器接收数据 在后台向服务器发送数据 1.1.2 正文 XMLHttp

  • jquery中ajax学习笔记4

    缓存问题: 何谓缓存问题?即当浏览器的输入内容相同,即请求的URL相同,这样浏览器就会去读缓存,两次的内容一样,就不会和服务器端进行交互. 解决方式:在请求的url中加上时间戳. 通过我的测试,IE.360两次用户名输入一致时不会和服务器端交互,firefox即使两次用户名输入的一样,仍然会和服务器端交互. 即:firefox的中服务器端返回的temp值会每次加1,IE.360就不会改变.故加上时间戳在这三种浏览器中都不会再有缓存问题. 修改的代码: AJAXServer.java 缓存问题 复

  • 从零开始学习jQuery (六) jquery中的AJAX使用

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式. 二.前言 Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数来帮助我们统一这种差异, 并且让调用Aj

  • 揭开AJAX神秘的面纱(AJAX个人学习笔记)第1/5页

    AJAX技术是多种计算机技术的结晶,它的名称来自:Asynchronism(异步).JavaScript.And.XML这4个单词首字母,即异步JavaScript请求处理XML技术.简单的描述就是数据异步传输网页局部刷新的技术.AJAX很流行,WEB程序设计中如果不应用AJAX技术,可以说是不完善的设计.就好象黑白电视机与彩电一样,AJAX就是后者,是一种技术更新的革命! 本人学习AJAX时间并不长,仅10余天,不能说百分之百掌握,但也有所领悟.现在把自己的学习经过和体会写下来,与君共分享.

随机推荐