请问为什么AJAX在传输数据的时候要使用JSON格式?有什么好处吗?别说规定啊 我想知道原理。
ajax一般用xml,字符串,json三种方式用json,一个结构清晰,二是容易转成对象调用,你可以谷歌一下json格式的好处。。自己查询的更加清晰深刻。
解释jsonp的原理,以及为什么不是真正的ajax
http://blog.csdn.net/u010861514/article/details/46238033jsonp就是ajax,区别就是一个是跨域一个不跨域,还有接收参数形式不一样!
原生js如何实现AJAX、JSONP及DOM加载完成事件
一、JS原生Ajaxajax:一种请求数据的方式,不需要刷新整个页面;ajax的技术核心是 XMLHttpRequest 对象;ajax 请求过程:创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据;下面简单封装一个函数,之后稍作解释 ajax({ url: "./TestXHR.aspx", //请求地址 type: "POST", //请求方式 data: { name: "super", age: 20 }, //请求参数 dataType: "json", success: function (response, xml) { // 此处放成功后执行的代码 }, fail: function (status) { // 此处放失败后执行的代码 } }); function ajax(options) { options = options || {}; options.type = (options.type || "GET").toUpperCase(); options.dataType = options.dataType || "json"; var params = formatParams(options.data); //创建 - 非IE6 - 第一步 if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } else { //IE6及其以下版本浏览器 var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //接收 - 第三步 xhr.onreadystatechange = function () { if (xhr.readyState == 4) { var status = xhr.status; if (status >= 200 && status < 300) { options.success && options.success(xhr.responseText, xhr.responseXML); } else { options.fail && options.fail(status); } } } //连接 和 发送 - 第二步 if (options.type == "GET") { xhr.open("GET", options.url + "?" + params, true); xhr.send(null); } else if (options.type == "POST") { xhr.open("POST", options.url, true); //设置表单提交时的内容类型 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(params); } } //格式化参数 function formatParams(data) { var arr = []; for (var name in data) { arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name])); } arr.push(("v=" + Math.random()).replace(".")); return arr.join("&"); }1、创建1.1、IE7及其以上版本中支持原生的 XHR 对象,因此可以直接用: var oAjax = new XMLHttpRequest();1.2、IE6及其之前的版本中,XHR对象是通过MSXML库中的一个ActiveX对象实现的。有的书中细化了IE中此类对象的三种不同版本,即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0 和 MSXML2.XMLHttp.6.0;个人感觉太麻烦,可以直接使用下面的语句创建: var oAjax=new ActiveXObject("Microsoft.XMLHTTP");2、连接和发送2.1、open()函数的三个参数:请求方式、请求地址、是否异步请求(同步请求的情况极少,至今还没用到过);2.2、GET 请求方式是通过URL参数将数据提交到服务器的,POST则是通过将数据作为 send 的参数提交到服务器;2.3、POST 请求中,在发送数据之前,要设置表单提交的内容类型;2.4、提交到服务器的参数必须经过 encodeURIComponent() 方法进行编码,实际上在参数列表”key=value”的形式中,key 和 value 都需要进行编码,因为会包含特殊字符。每次请求的时候都会在参数列表中拼入一个 “v=xx” 的字符串,这样是为了拒绝缓存,每次都直接请求到服务器上。 encodeURI() :用于整个 URI 的编码,不会对本身属于 URI 的特殊字符进行编码,如冒号、正斜杠、问号和井号;其对应的解码函数 decodeURI(); encodeURIComponent() :用于对 URI 中的某一部分进行编码,会对它发现的任何非标准字符进行编码;其对应的解码函数 decodeURIComponent();3、接收3.1、接收到响应后,响应的数据会自动填充XHR对象,相关属性如下 responseText:响应返回的主体内容,为字符串类型; responseXML:如果响应的内容类型是 "text/xml" 或 "application/xml",这个属性中将保存着相应的xml 数据,是 XML 对应的 document 类型; status:响应的HTTP状态码; statusText:HTTP状态的说明;3.2、XHR对象的readyState属性表示请求/响应过程的当前活动阶段,这个属性的值如下 0-未初始化,尚未调用open()方法; 1-启动,调用了open()方法,未调用send()方法; 2-发送,已经调用了send()方法,未接收到响应; 3-接收,已经接收到部分响应数据; 4-完成,已经接收到全部响应数据;只要 readyState 的值变化,就会调用 readystatechange 事件,(其实为了逻辑上通顺,可以把readystatechange放到send之后,因为send时请求服务器,会进行网络通信,需要时间,在send之后指定readystatechange事件处理程序也是可以的,我一般都是这样用,但为了规范和跨浏览器兼容性,还是在open之前进行指定吧)。3.3、在readystatechange事件中,先判断响应是否接收完成,然后判断服务器是否成功处理请求,xhr.status 是状态码,状态码以2开头的都是成功,304表示从缓存中获取,上面的代码在每次请求的时候都加入了随机数,所以不会从缓存中取值,故该状态不需判断。4、ajax请求是不能跨域的!二、JSONPJSONP(JSON with Padding) 是一种跨域请求方式。主要原理是利用了script 标签可以跨域请求的特点,由其 src 属性发送请求到服务器,服务器返回 js 代码,网页端接受响应,然后就直接执行了,这和通过 script 标签引用外部文件的原理是一样的。JSONP由两部分组成:回调函数和数据,回调函数一般是由网页端控制,作为参数发往服务器端,服务器端把该函数和数据拼成字符串返回。比如网页端创建一个 script 标签,并给其 src 赋值为 http://www.superfiresun.com/json/?callback=process, 此时网页端就发起一个请求。服务端将要返回的数据拼好最为函数的参数传入,服务端返回的数据格式类似”process({‘name":"superfiresun"})”,网页端接收到了响应值,因为请求者是 script,所以相当于直接调用 process 方法,并且传入了一个参数。单看响应返回的数据,JSONP 比 ajax 方式就多了一个回调函数。 function jsonp(options) { options = options || {}; if (!options.url || !options.callback) { throw new Error("参数不合法"); } //创建 script 标签并加入到页面中 var callbackName = ("jsonp_" + Math.random()).replace(".", ""); var oHead = document.getElementsByTagName("head")[0]; options.data[options.callback] = callbackName; var params = formatParams(options.data); var oS = document.createElement("script"); oHead.appendChild(oS); //创建jsonp回调函数 window[callbackName] = function (json) { oHead.removeChild(oS); clearTimeout(oS.timer); window[callbackName] = null; options.success && options.success(json); }; //发送请求 oS.src = options.url + "?" + params; //超时处理 if (options.time) { oS.timer = setTimeout(function () { window[callbackName] = null; oHead.removeChild(oS); options.fail && options.fail({ message: "超时" }); }, time); } }; //格式化参数 function formatParams(data) { var arr = []; for (var name in data) { arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[i])); } return arr.join("&"); }1、因为 script 标签的 src 属性只在第一次设置的时候起作用,导致 script 标签没法重用,所以每次完成操作之后要移除;2、JSONP这种请求方式中,参数依旧需要编码;3、如果不设置超时,就无法得知此次请求是成功还是失败;三、模仿JQuery中的ready()事件1、DOMContentLoaded事件,在DOM树加载完成之后立即执行,始终会在load之前执行。 IE9+、FF、Chrome、Safari3.1+和Opera9+都支持该事件。 对于不支持该事件的浏览器,可以使用如下代码:setTimeout(function(){// 代码块}, 0) ; DOMContentLoaded 事件只能通过 DOM2 级方式添加,即采用addEventListener()/attachEvent() 方式添加才能够使用。事件对象不会提供任何额外信息。2、readystatechange事件 IE为DOM文档中的某些部分(区别于 XHR 对象的 readystatechange 事件)提供了该事件,这个事件的目的是提供与文档或元素的加载状态有关的信息,但这个事件的行为有时候也很难预料。支持该事件的对象都有一个readyState属性,注意,不是 event 事件对象。IE、Firefox4+和Opera 支持该事件。readyState属性的值如下: “uninitialized” - 未初始化:对象存在但尚未初始化; “loading” - 正在加载:对象正在加载数据; “loaded” - 加载完毕,对象加载数据完毕; “interactive” - 交互:可以操作对象了,但还没有完全加载; “complete” - 完成:对象已经加载完成;2.1、并非所有的对象都会经历readyState的这几个阶段,如果这个阶段不适用某个对象,则该对象完全可能跳过该阶段,并没有规定哪个阶段适用于哪个对象。这意味着 readystatechange 事件经常会少于4次,相对应的 readyState 属性值也不是连续的。2.2、对于 document 而言,interactive 和 complete 阶段会在于 DOMContentLoaded 大致相同的时刻触发 readystatechange 事件;load 事件和 readystatechange 事件的触发顺序会因页面的外部资源的多少而变化,也就是说,readystatechange 事件并不会一直在 load 事件之前执行。外部资源越多,对 readystatechange 事件就越有利。interactive 和 complete 的顺序也是不一致的,谁都有可能先执行,引用的外部资源越多,对交互阶段越有利。所以为了尽可能早的执行代码,两个状态要同时判断。3、doScroll IE5.5+支持,当页面中有滚动条时,可以用 doScroll("right")/doScroll("down") 等来移动滚动条,这个方法只有等DOM加载完成以后才能用,所以在IE低版本浏览器中可以通过这个属性判断 DOM 结构是否加载完成。介绍这个属性主要是模仿 jquery 中的解决方案。function ready(readyFn) { //非IE浏览器 if (document.addEventListener) { document.addEventListener("DOMContentLoaded", function () { readyFn && readyFn(); }, false); } else { //方案1和2 哪个快用哪一个 var bReady = false; //方案1 document.attachEvent("onreadystatechange", function () { if (bReady) { return; } if (document.readyState == "complete" || document.readyState == "interactive") { bReady = true; readyFn && readyFn(); }; }); //方案2 //jquery也会担心doScroll会在iframe内失效,此处是判断当前页是否被放在了iframe里 if (!window.frameElement) { setTimeout(checkDoScroll, 1); } function checkDoScroll() { try { document.documentElement.doScroll("left"); if (bReady) { return; } bReady = true; readyFn && readyFn(); } catch (e) { // 不断检查 doScroll 是否可用 - DOM结构是否加载完成 setTimeout(checkDoScroll, 1); } }; } };注:setTimeout(checkDoScroll, 1); 目的是让浏览器尽快执行 checkDoScroll 函数,间隔时间设置为 1ms,对当下的浏览器来说是不太可能的。每个浏览器都有自己默认的最小间隔时间,即使时间设置为最小间隔时间,也只是代表隔这些时间过去之后,JavaScript 会把 checkDoScroll 加入到执行队列中,如果此时 JavaScript 进程空闲,则会立即执行该代码。
AJAX的常用语法是什么
我们都知道, ajax目前已经是一门很普遍的技术了,本文主要介绍了原生JS中的ajax的实现原理以及XMLHttpRequest及promise的概念和流程。Ajax是目前很普遍的一门技术,也是很值得探讨和研究的一门技术。本文将针对Ajax的发展过程并结合其在不同库框架中的使用方式来和大家分享下Ajax的那些新老语法。Ajax简介Ajax全称为“Asynchronous Javascript And XML”, 即“异步JavaScript和XML”的意思。通过Ajax我们可以向服务器发送请,在不阻塞页面的情况下进行数据交互,也可以理解为异步数据传输。在Ajax的帮助下我们的网页只需局部刷新即可更新数据的显示,减少了不必要的数据量,大大提高了用户体验,缩短了用户等待的时间,使得web应用程序更小、更快,更友好。当然以上都是司空见惯的内容了,作为一名合格的开发人员基本都再熟悉不过了,这里只为那些刚入门的新手做一个简单的介绍。原生Ajax基本上所有现代的浏览器都支持原生Ajax的功能,下面就来详细介绍下利用原生JS我们怎样来发起和处理Ajax请求。获取XMLHttpRequest对象var xhr = new XMLHttpRequest(); // 获取浏览器内置的XMLHttpRequest对象如果你的项目应用不考虑低版本IE,那么可以直接用上面的方法,所有现代浏览器 (Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。如果需要兼容老版本IE(IE5、IE6),那么可以使用 ActiveX 对象:var xhr;if (window.XMLHttpRequest) { xhr=new XMLHttpRequest();} else if (window.ActiveXObject) { // 兼容老版本浏览器 xhr=new ActiveXObject("Microsoft.XMLHTTP");}参数配置有了XMLHttpRequest对象,我们还需要配置一些请求的参数信息来完成数据交互,利用open方法即可:var xhr;if (window.XMLHttpRequest) { xhr=new XMLHttpRequest();} else if (window.ActiveXObject) { xhr=new ActiveXObject("Microsoft.XMLHTTP");}if (xhr) { xhr.open("GET", "/test/", true); // 以GET请求的方式向"/test/"路径发送异步请求}open方法为我们创建了一个新的http请求,其中第一个参数为请求方式,一般为"GET"或"POST";第二个参数为请求url;第三个参数为是否异步,默认为true。发送请求配置完了基本参数信息,我们直接调用send方法发送请求,代码如下:var xhr;if (window.XMLHttpRequest) { xhr=new XMLHttpRequest();} else if (window.ActiveXObject) { xhr=new ActiveXObject("Microsoft.XMLHTTP");}if (xhr) { xhr.open("GET", "/test/", true); xhr.send(); // 调用send方法发送请求}这里需要注意的是如果使用GET方法传递参数,我们可以直接将参数放在url后面,比如"/test/?name=luozh&size=12";如果使用POST方法,那么我们的参数需要写在send方法里,如:xhr.open("POST", "/test/", true);xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 将请求头设置为表单方式提交xhr.send("name=luozh&size=12");最终会以Form Data的形式传递:如果不设置请求头,原生Ajax会默认使用Content-Type是"text/plain;charset=UTF-8"的方式发送数据,如果按照上面的参数书写形式,我们最终传输的形式这样的:显然这并不是服务器期望的数据格式,我们可以这样写:xhr.open("POST", "/test/", true);xhr.send(JSON.stringify({name: "luozh", size: 12}));这样我们可以直接传递JSON字符串给后台处理,当然后台也许进行相应配置。监测状态发送完Ajax请求之后,我们需要针对服务器返回的状态进行监测并进行相应的处理,这里我们需要使用onreadystatechange方法,代码如下:var xhr;if (window.XMLHttpRequest) { xhr=new XMLHttpRequest();} else if (window.ActiveXObject) { xhr=new ActiveXObject("Microsoft.XMLHTTP");}if (xhr) { xhr.open("GET", "/test/", true); // 以GET请求的方式向"/test/"路径发送异步请求 xhr.send(); xhr.onreadystatechange = function () { // 利用onreadystatechange监测状态 if (xhr.readyState === 4) { // readyState为4表示请求响应完成 if (xhr.status === 200) { // status为200表示请求成功 console.log("执行成功"); } else { console.log("执行出错"); } } }}上面我们利用onreadystatechange监测状态,并在内部利用readyState获取当前的状态。readyState一共有5个阶段,当其为4时表示响应内容解析完成,可以在客户端调用了。当readyState为4时,我们又通过status来获取状态码,状态码为200时执行成功代码,否则执行出错代码。当然我们可以用onload来代替onreadystatechange等于4的情况,因为onload只在状态为4的时候才被调用,代码如下xhr.onload = function () { // 调用onload if (xhr.status === 200) { // status为200表示请求成功 console.log("执行成功"); } else { console.log("执行出错"); } }然而需要注意的是,IE对onload这个属性的支持并不友好。 除了onload还有:1.onloadstart2.onprogress3.onabort4.ontimeout5.onerror6.onloadend等事件,有兴趣的同学可以亲自去实践它们的用处。以上便是原生Ajax请求数据的常见代码。其他库框架中的AjaxjQuery中的AjaxjQuery作为一个使用人数最多的库,其Ajax很好的封装了原生Ajax的代码,在兼容性和易用性方面都做了很大的提高,让Ajax的调用变得非常简单。下面便是一段简单的jQuery的Ajax代码:$.ajax({ method: "GET", // 1.9.0本版前用"type" url: "/test/", dataType: "json"}).done(function() { console.log("执行成功");}).fail(function() { console.log("执行出错");})与原生Ajax不同的是,jQuery中默认的Content-type是"application/x-www-form-urlencoded; charset=UTF-8", 想了解更多的jQuery Ajax的信息可以移步官方文档:http://api.jquery.com/jquery.ajax/Vue.js中的AjaxVue.js作为目前热门的前端框架,其实其本身并不包含Ajax功能,而是通过插件的形式额外需要在项目中引用,其官方推荐Ajax插件为vue-resource,下面便是vue-resource的请求代码:Vue.http.get("/test/").then((response) => { console.log("执行成功");}, (response) => { console.log("执行出错");});3.Angular.js中的Ajax这里Angular.js中的Ajax主要指Angular的1.×版本,因为Angular2目前还不建议在生产环境中使用。var myApp = angular.module("myApp",[]);var myCtrl = myApp.controller("myCtrl",["$scope","$http",function($scope, $http){ $http({ method: "GET", url: "/test/", headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"} }).success(function (data) { console.log("执行成功"); }).error(function () { console.log("执行出错"); });}]);在Angular中,我们需要在控制器上注册一个$http的事件,然后才能在内部执行Ajax。Angular的Ajax默认的Content-type是"application/json;charset=UTF-8",所以如果想用表单的方式提交还需设置下headers属性。4.React中的Ajax在React中我比较推荐使用fetch来请求数据,当然其不仅适用于React,在任何一种框架如上面的Vue、Angular中都可以使用,因为其已经被目前主流浏览器所支持,至于其主要功能和用法,我在下面会做下讲解。Fetch APIFetch API 是基于 Promise 设计,由于Promise的浏览器兼容性问题及Fetch API本身的兼容问题,一些浏览器暂时不支持Fetch API,浏览器兼容图如下:当然我们可以通过使用一些插件来解决兼容性问题,比如:fetch-polyfill、es6-promise、fetch-ie8等。使用Fetch我们可以非常便捷的编写Ajax请求,我们用原生的XMLHttpRequst对象和Fetch来比较一下:XMLHttpRequst API// XMLHttpRequst APIvar xhr = new XMLHttpRequest();xhr.open("GET", "/test/", true);xhr.onload = function() { console.log("执行成功");};xhr.onerror = function() { console.log("执行出错");};xhr.send();Fetch API fetch("/test/").then(function(response) { return response.json();}).then(function(data) { console.log("执行成功");}).catch(function(e) { console.log("执行出错");});可以看出使用Fetch后我们的代码更加简洁和语义化,链式调用的方式也使其更加流畅和清晰。随着浏览器内核的不断完善,今后的XMLHttpRequest会逐渐被Fetch替代。关于Fetch的详细介绍可以移步:https://segmentfault.com/a/1190000003810652跨域Ajax介绍了各种各样的Ajax API,我们不能避免的一个重要问题就是跨域,这里重点讲解下Ajax跨域的处理方式。处理Ajax跨域问题主要有以下4种方式:1.利用iframe2.利用JSONP3.利用代理4.利用HTML5提供的XMLHttpRequest Level2第1和第2种方式大家应该都非常熟悉,都属于前端的活,这里就不做介绍了,这里主要介绍第3和第4种方式。利用代理的方式可以这样理解:通过在同域名下的web服务器端创建一个代理:北京服务器(域名:www.beijing.com)上海服务器(域名:www.shanghai.com)比如在北京的web服务器的后台(www.beijing.com/proxy-shanghaiservice.php)来调用上海服务器(www.shanghai.com/services.php)的服务,然后再把访问结果返回给前端,这样前端调用北京同域名的服务就和调用上海的服务效果相同了。利用XMLHttpRequest Level2的方式需要后台将请求头进行相应配置:// php语法header("Access-Control-Allow-Origin: *");header("Access-Control-Allow-Methods: GET,POST");以上的*号可以替换成允许访问的域名,*表示所有域名都可以访问。由此可见,第3和第4种方式主要是后台的活,前端只需调用就可以。总结无论Ajax的语法多么多变,无论库和框架如何封装Ajax,其只是一种实现异步数据交互的工具,我们只需理解原生JS中Ajax的实现原理,了解XMLHttpRequest及promise的概念和流程,便可以轻松的在数据异步交互的时代游刃有余。相信看了这些案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!相关阅读:CSS的文本字体颜色如何设置css里的font文字怎么设置 Css3中的transform 渐变属性怎么使用
ajax 实现一个请求,请求进度百分比计算的原理是什么。
ajax.process,貌似只有jquery的xhr对象才有
ajax jsonData 怎么传两个json 格式的数据吗
啊嘎嘎谁是哥哥哥哥
ajax访问本地文件‘.
那个不是 磁盘文件的地址 ,是一个网页地址 ,ajax异步提交xmlhttp.open("GET","/ajax/test1.txt",true);的三个参数 第一个是get 方式还是 post 方式 第二个是 提交到的地址 ,第三个参数 是同步提交还是异步提交, 你在写一个servlet 或者 action 提交过去 ,.xmlhttp.responseText是到指定url 运行后 返回的 值, 你再多看一下ajax的原理
AJAX的原理—如何做到异步和局部刷新【实现代码】
Overriew: onReadyStateChange被回调函数赋值,则能实现异步调用,回调函数直接操作DOM,则能实现局部刷新。那么XMLHttpRequest的onReadyStateChange如何知道服务ready了呢?状态如何change了呢(观察者模式)?则是通过客户端对服务的状态询问(定期轮询)所实现的。详解:1. XMLHttpRequest 负责与服务器端的通讯,其内部有很多重要的属性:readyStatus=4,status=200等等。当XMLHttpRequest的整体状态并且保证它已经完成(readyStatus=4),即数据已经发送完毕。然后根据服务器的设定询问(类似于客户端会轮询服务器的返回状态,仍然是http短连接,并非长连接的服务器端push)请求状态,如果一切已经就绪(status=200),那么就执行需要的操作。操作一般就是直接操作DOM,所以AJAX能做到所谓的“无刷新”用户体验。document.getElementById("user1").innerHTML = "数据正在加载..."; if (xmlhttp.status == 200) { document.write(xmlhttp.responseText); }2. 那么在AJAX客户端如何做到的异步呢?实际上就是Javascript的回调函数起的作用提供一个回调JavaScript函数,一旦服务器响应可用,该函数就被执行业务函数:function castVote(rank) { var url = "/ajax-demo/static-article-ranking.html"; var callback = processAjaxResponse; executeXhr(callback, url);}需要异步通讯的函数: function executeXhr(callback, url) { // branch for native XMLHttpRequest object if (window.XMLHttpRequest) { req = new XMLHttpRequest(); req.onreadystatechange = callback; req.open("GET", url, true); req.send()(null); } // branch for IE/Windows ActiveX version else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = callback; req.open("GET", url, true); req.send()(); } }}req.onreadystatechange = callbackreq.open("GET", url, true)第一行定义了JavaScript回调函数,一旦响应就绪它就自动执行,而req.open()方法中所指定的“true”标志说明想要异步执行该请求。一旦服务器处理完XmlHttpRequest并返回给浏览器,使用req.onreadystatechange指派所设置的回调方法将被自动调用。回调函数:function processAjaxResponse() { if (req.readyState == 4) { // only if "OK" if (req.status == 200) { document.getElementById("user1").innerHTML = req.responseText; } else { alert("There was a problem retrieving the XML data:" + req.statusText); } }}以上这篇AJAX的原理—如何做到异步和局部刷新【实现代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
ajax怎么获取request
1、这是Ajax异步Request:<script type="text/javascript"><!-- var request = false; try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = false; } } } if (!request) alert("Error initializing XMLHttpRequest!"); //获取信息 function GetInfo() { var url = "test.aspx?userName=" + document.getElementById("txtName").value; request.open("GET", url, true); request.onreadystatechange = updatePageTime; request.send(null); } //更新页面 function updatePageTime() { if (request.readyState == 4) { if (request.status == 200) { var response = request.responseText; document.getElementById("txtLoginName").value = response; } else if (request.status == 404) { alert("Requested URL is not found."); } else if (request.status == 403) { alert("Access denied."); } else alert("status is " + request.status); } } // --></script> <form id="form1" runat="server"> <input id="txtName" onchange="GetInfo()" type="text" /> <input id="txtLoginName" type="text" /> </form> 2、下面是我对你的题目的自己的想法{ action : "online_state", params : { state : fld.value } }这种方式叫字面量写法,也可以叫json写法原理是大括号代表对象,中括号代表集合,大括号里面用字符串或者对象当做属性,加冒号来表示赋值由于JavaScript若类型语言的特性,可以把一个大括号包住的对象赋值给一个属性举例翻译成类写法就是a = 1;b = 2;同理}翻译一下就是a = 1;b = { aa=2; bb=3;}希望对你有帮助!
ajax原理:
ajax AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 主要包含了以下几种技术Ajax(Asynchronous JavaScript + XML)的定义 基于web标准(standards-based presentation)XHTML+CSS的表示; 使用 DOM(Document Object Model)进行动态显示及交互; 使用 XML 和 XSLT 进行数据交换及相关操作; 使用 XMLHttpRequest 进行异步数据查询、检索; 使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文。类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实上,一些基于AJAX的“派生/合成”式(derivative/composite)的技术正在出现,如“AFLAX”。 AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象,也不支持XSLT。AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XML的web service接口,并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快 的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。Ajax应用程序的优势在于:1. 通过异步模式,提升了用户体验2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用3. Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。Ajax的工作原理Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不 阻塞用户。在创建Web站点时,在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能:动态更新购物车的物品总数,无需用户单击Update并等待服务器重新发送整个页面。 提升站点的性能,这是通过减少从服务器下载的数据量而实现的。例如,在某购物车页面,当更新篮子中的一项物品的数量时,会重新载入整个页面,这必须下载整 个页面的数据。如果使用Ajax计算新的总量,服务器只会返回新的总量值,因此所需的带宽仅为原来的百分之一。 消除了每次用户输入时的页面刷新。例如,在Ajax中,如果用户在分页列表上单击Next,则服务器数据只刷新列表而不是整个页面。 直接编辑表格数据,而不是要求用户导航到新的页面来编辑数据。对于Ajax,当用户单击Edit时,可以将静态表格刷新为内容可编辑的表格。用户单击Done之后,就可以发出一个Ajax请求来更新服务器,并刷新表格,使其包含静态、只读的数据。一切皆有可能!但愿它能够激发您开始开发自己的基于Ajax的站点。然而,在开始之前,让我们介绍一个现有的Web站点,它遵循传统的提交/等待/重新显示的范例,我们还将讨论Ajax如何提升用户体验。Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。
ajax长轮询
一般最原始的作法就是在客户端搞个定时器一直向后台请求,而ajax的长轮询与一般的http连接不一样,它发送的是长连接,比如说你发过去一个连接,它并不急于给你返回过来请求,而是等到后台有动作的时候才有相应,这样就减少了客户端的压力,现在很多地方都用到这种技术,比如说百度,新浪微博,比较成熟的框架有pushlet,另外servlet3.0也增加了异步的功能,也能很好的解决这个问题,HTML5在将来,这个问题就更简单了!如果你要研究,建议你深入的了解一下HTTP协议的内部工作原理,了解一下服务器的实现,希望能帮到你。
ASP如何用Ajax实现无刷新读取数据库信息(后台发布信息,前台不刷新也能看到)
前台必须要定义时比较吧
$.ajax传递json格式参数,某属性为null,取值为空字符串的问题。
data : {aa:""},
在jsp中通过Ajax判断注册的用户名是否存在,并且是不用通过跳转页面来判断的代码
<html> <head> <script type="text/javascript"> function $(tagId){ return document.getElementById(tagId); } function checkUserName(){ var name = $("nameId").value; var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHttp"); } xhr.open("POST","/Ajax/userNameCheckServlet"); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send("userNeme="+name); xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ var ret = xhr.responseText; var span = $("msgId"); //innerHTML作用 方便往标签中增加内容 span.innerHTML = "<font color="red">"+ret+"</font>" ; } } } </script> </head> <body> <table> <tr> <td>用户名:<input type="text" id="nameId" onblur="checkUserName();"/> <span id="msgId"></span></td> </tr> <tr> <td>密 码:<input type="password"/></td> </tr> <tr> <td align="center"><input type="button" value="确定"/></td> </tr> </table> </body></html>然后在servlet里判断是否用户名存在:package com.wsw.day01;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class UserNameCheckServlet extends HttpServlet{ @Override protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("gbk"); response.setCharacterEncoding("gbk"); String userName = request.getParameter("userNeme"); System.out.println(userName); PrintWriter out = response.getWriter(); if("wsw".equals(userName)){ out.print("is ok"); }else{ out.print("is false"); } out.flush(); }}这里是简单的判断,实际应用的时候要连数据库,查询判断,反正都是这个原理
jquery ajax获取后台request中的值 ,前台AJAX如下,后台如图
亲,后端写的不对,用out对象像浏览器写数据。不然拿不到!
请问为什么AJAX在传输数据的时候要使用JSON格式?有什么好处吗?别说规定啊 我想知道原理。
ajax传递数据有很多种形式,因为json格式是js的,所以相对来说比较简单,出了json还可以是xml,只不过接受的时候比较麻烦,
淘宝登陆页面头部显示用户id是后台获取数据还是前端提供?采用的是什么技术?Ajax还是什么能告诉我原理吗
javascript,xml,后台异步
ajax怎样做到不刷新
实际是一种高级的JavaScript语言,你要学ajax就必须要知道JavaScript语言,关于无刷新,比如有的网站,旁边有个用户名登陆框
详解Ajax的原理及优缺点有哪些
这次给大家带来详解Ajax的原理及优缺点有哪些,使用Ajax的原理及优缺点的注意事项有哪些,下面就是实战案例,一起来看一下。1、ajax技术的背景不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth、google suggest以及gmail等对ajax技术的广泛应用,催生了ajax的流行。而这也让微软感到无比的尴尬,因为早在97年,微软便已经发明了ajax中的关键技术,并且在99年IE5推出之时,它便开始支持XmlHttpRequest对象,并且微软之前已经开始在它的一些产品中应用ajax,比如说MSDN网站菜单中的一些应用。遗憾的是,不知道出于什么想法,当时微软发明了ajax的核心技术之后,并没有看到它的潜力而加以发展和推广,而是将它搁置起来。对于这一点来说,我个人是觉得非常奇怪的,因为以微软的资源和它的战略眼光来说,应该不会看不到ajax技术的前景,唯一的解释也许就是因为当时它的主要竞争对手Netscape的消失反而使它变得麻痹和迟钝,毕竟巨人也有打盹的时候,比如IBM曾经在对微软战略上的失误。正是这一次的失误,成就了它现在的竞争对手google在ajax方面的领先地位,而事实上google目前在ajax技术方面的领先是微软所无法达到的,这一点在后面我讲述ajax缺陷的时候也会提到。现在微软也意识到了这个问题,因此它也开始在ajax领域奋起直追,比如说推出它自己的ajax框架atlas,并且在.NET2.0也提供了一个用来实现异步回调的接口,即ICallBack接口。那么微软为什么对自己在ajax方面的落后如此紧张呢?现在就让我们来分析一下ajax技术后面隐藏的深刻意义。2、ajax技术的意义我们在平时的开发中都多多少少的接触或者应用到了ajax,谈到ajax技术的意义,我们关注得最多的毫无疑问是提升用户的体验。但是,如果我们结合将来电脑和互联网的发展趋势,我们会发现ajax技术在某些方面正好代表了这种趋势。为什么这样说呢?我们知道,自从电脑出现以来,一直是桌面软件占据着绝对主导的地位,但是互联网的出现和成功使这一切开始发生着微妙的变化。相当一部分的人都相信,迟早有一天,数据和电脑软件将会从桌面转移到互联网。也就是说,将来的电脑有可能抛弃笨重的硬盘,而直接从互联网来获取数据和服务,我记得我念大学的时候,有位教授给我们上课的时候,曾经设想过这样一种情景,也许在将来的电脑桌面上,没有任何多余的软件和程序,而仅仅只有一个IE,虽然现在看起来我们距离这一天还很遥远,并且这其中还有很多的问题需要解决,但是我觉得这个并非梦想,而是迟早将实现的现实。那么,这其中的主要问题就是互联网的连接不稳定,谁也不愿意看着自己的电脑从服务器一点一滴的下载数据,那么,ajax是不是解决了这个问题呢,说实话,与其说ajax解决了这个问题,倒不如它只是掩盖了这个问题,它只是在服务器和客户端之间充当了一个缓冲器,让用户误以为服务没有中断。精确的说,ajax并不能提高从服务器端下载数据的速度,而只是使这个等待不那么令人沮丧。但是正是这一点就足以产生巨大的影响和震动,它实际上也对桌面软件产生了巨大的冲击。这一点我用一个例子来说明,我们可以比较一下Outlook Express和Gmail,前者是典型的桌面软件,后者是ajax所实现的B/S模式,实际上后者目前已经在慢慢取代前者了,Gmail在收发邮件的时候已经和Outlook Express的功能几乎没有差别了,而且它不需要安装客户端程序。这就是为什么微软对ajax所带来的冲击有着如此的恐惧心理,并且在它前不久所进行的调查之中,将google看做他们未来十年内的主要竞争对手的主要原因之一。当然,这种变化也并不会将桌面软件全部淘汰,现有的浏览器还没有一个能像PhotoShop等桌面程序那样处理复杂的图像。但是我们也不能忽视它带来的影响和冲击。3、关于ajax的名字ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式。关于同步和异步异步传输是面向字符的传输,它的单位是字符;而同步传输是面向比特的传输,它的单位是桢,它传输的时候要求接受方和发送方的时钟是保持一致的。具体来说,异步传输是将比特分成小组来进行传送。一般每个小组是一个8位字符,在每个小组的头部和尾部都有一个开始位和一个停止位,它在传送过程中接收方和发送方的时钟不要求一致,也就是说,发送方可以在任何时刻发送这些小组,而接收方并不知道它什么时候到达。一个最明显的例子就是计算机键盘和主机的通信,按下一个键的同时向主机发送一个8比特位的ASCII代码,键盘可以在任何时刻发送代码,这取决于用户的输入速度,内部的硬件必须能够在任何时刻接收一个键入的字符。这是一个典型的异步传输过程。异步传输存在一个潜在的问题,即接收方并不知道数据会在什么时候到达。在它检测到数据并做出响应之前,第一个比特已经过去了。这就像有人出乎意料地从后面走上来跟你说话,而你没来得及反应过来,漏掉了最前面的几个词。因此,每次异步传输的信息都以一个起始位开头,它通知接收方数据已经到达了,这就给了接收方响应、接收和缓存数据比特的时间;在传输结束时,一个停止位表示该次传输信息的终止。按照惯例,空闲(没有传送数据)的线路实际携带着一个代表二进制1的信号。步传输的开始位使信号变成0,其他的比特位使信号随传输的数据信息而变化。最后,停止位使信号重新变回1,该信号一直保持到下一个开始位到达。例如在键盘上数字“1”,按照8比特位的扩展ASCII编码,将发送“00110001”,同时需要在8比特位的前面加一个起始位,后面一个停止位。同步传输的比特分组要大得多。它不是独立地发送每个字符,每个字符都有自己的开始位和停止位,而是把它们组合起来一起发送。我们将这些组合称为数据帧,或简称为帧。数据帧的第一部分包含一组同步字符,它是一个独特的比特组合,类似于前面提到的起始位,用于通知接收方一个帧已经到达,但它同时还能确保接收方的采样速度和比特的到达速度保持一致,使收发双方进入同步。帧的最后一部分是一个帧结束标记。与同步字符一样,它也是一个独特的比特串,类似于前面提到的停止位,用于表示在下一帧开始之前没有别的即将到达的数据了。同步传输通常要比异步传输快速得多。接收方不必对每个字符进行开始和停止的操作。一旦检测到帧同步字符,它就在接下来的数据到达时接收它们。另外,同步传输的开销也比较少。例如,一个典型的帧可能有500字节(即4000比特)的数据,其中可能只包含100比特的开销。这时,增加的比特位使传输的比特总数增加2.5%,这与异步传输中25 %的增值要小得多。随着数据帧中实际数据比特位的增加,开销比特所占的百分比将相应地减少。但是,数据比特位越长,缓存数据所需要的缓冲区也越大,这就限制了一个帧的大小。另外,帧越大,它占据传输媒体的连续时间也越长。在极端的情况下,这将导致其他用户等得太久。个小时,在这10个小时内水没有完全断,只是流量比原来小了很多,在10个小时后恢复正常流量,那么,如果是你你会选择哪种方式呢?显然是后者。4、ajax所包含的技术大家都知道ajax并非一种新的技术,而是几种原有技术的结合体。它由下列技术组合而成。1.使用CSS和XHTML来表示。2. 使用DOM模型来交互和动态显示。3.使用XMLHttpRequest来和服务器进行异步通信。4.使用javascript来绑定和调用。在上面几中技术中,除了XmlHttpRequest对象以外,其它所有的技术都是基于web标准并且已经得到了广泛使用的,XMLHttpRequest虽然目前还没有被W3C所采纳,但是它已经是一个事实的标准,因为目前几乎所有的主流浏览器都支持它。5、ajax原理和XmlHttpRequest对象Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。所以我们先从XMLHttpRequest讲起,来看看它的工作原理。首先,我们先来看看XMLHttpRequest这个对象的属性。它的属性有:onreadystatechange 每次状态改变所触发事件的事件处理程序。responseText从服务器进程返回数据的字符串形式。responseXML从服务器进程返回的DOM兼容的文档数据对象。status从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)status Text伴随状态码的字符串信息readyState对象状态值0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)1 (初始化) 对象已建立,尚未调用send方法2 (发送数据) send方法已调用,但是当前的状态及http头未知3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据但是,由于各浏览器之间存在差异,所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest对象的方法。function CreateXmlHttp(){//非IE浏览器创建XmlHttpRequest对象if(window.XmlHttpRequest){xmlhttp=new XmlHttpRequest();}//IE浏览器创建XmlHttpRequest对象if(window.ActiveXObject){try{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}catch(e){try{xmlhttp=new ActiveXObject("msxml2.XMLHTTP");}catch(ex){}}}}function TestAjax(){var data=document.getElementByIdx("username").value;CreateXmlHttp();if(!xmlhttp){alert("创建xmlhttp对象异常!");return false;}xmlhttp.open("POST",url,false);xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4){document.getElementByIdx("user1").innerHTML="数据正在加载...";if(xmlhttp.status==200){document.write(xmlhttp.responseText);}}}xmlhttp.send();}如上所示,函数首先检查XMLHttpRequest的整体状态并且保证它已经完成(readyStatus=4),即数据已经发送完毕。然后根据服务器的设定询问请求状态,如果一切已经就绪(status=200),那么就执行下面需要的操作。对于XmlHttpRequest的两个方法,open和send,其中open方法指定了:a、向服务器提交数据的类型,即post还是get。b、请求的url地址和传递的参数。c、传输方式,false为同步,true为异步。默认为true。如果是异步通信方式(true),客户机就不等待服务器的响应;如果是同步方式(false),客户机就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式,在某些页面中,可能会发出多个请求,甚至是有组织有计划有队形大规模的高强度的request,而后一个是会覆盖前一个的,这个时候当然要指定同步方式。Send方法用来发送请求。知道了XMLHttpRequest的工作流程,我们可以看出,XMLHttpRequest是完全用来向服务器发出一个请求的,它的作用也局限于此,但它的作用是整个ajax实现的关键,因为ajax无非是两个过程,发出请求和响应请求。并且它完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。现在,我们对ajax的原理大概可以有一个了解了。我们可以把服务器端看成一个数据接口,它返回的是一个纯文本流,当然,这个文本流可以是XML格式,可以是Html,可以是Javascript代码,也可以只是一个字符串。这时候,XMLHttpRequest向服务器端请求这个页面,服务器端将文本的结果写入页面,这和普通的web开发流程是一样的,不同的是,客户端在异步获取这个结果后,不是直接显示在页面,而是先由javascript来处理,然后再显示在页面。至于现在流行的很多ajax控件,比如magicajax等,可以返回DataSet等其它数据类型,只是将这个过程封装了的结果,本质上他们并没有什么太大的区别。6、ajax的优点Ajax的给我们带来的好处大家基本上都深有体会,在这里我只简单的讲几点:1、最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好。2、使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。7、ajax的缺点下面我着重讲一讲ajax的缺陷,因为平时我们大多注意的都是ajax给我们所带来的好处诸如用户体验的提升。而对ajax所带来的缺陷有所忽视。下面所阐述的ajax的缺陷都是它先天所产生的。1、ajax干掉了back按钮,即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能,但是它没法和js进行很好的合作。这是ajax所带来的一个比较严重的问题,因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法?答案是肯定的,用过Gmail的知道,Gmail下面采用的ajax技术解决了这个问题,在Gmail下面是可以后退的,但是,它也并不能改变ajax的机制,它只是采用的一个比较笨但是有效的办法,即用户单击后退按钮访问历史记录时,通过创建或使用一个隐藏的IFRAME来重现页面上的变更。(例如,当用户在Google Maps中单击后退时,它在一个隐藏的IFRAME中进行搜索,然后将搜索结果反映到Ajax元素上,以便将应用程序状态恢复到当时的状态。)但是,虽然说这个问题是可以解决的,但是它所带来的开发成本是非常高的,和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个非常严重的问题。2、安全问题技术同时也对IT企业带来了新的安全威胁,ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来,允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点,诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。3、对搜索引擎的支持比较弱。4、破坏了程序的异常机制。至少从目前看来,像ajax.dll,ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。关于这个问题,我曾经在开发过程中遇到过,但是查了一下网上几乎没有相关的介绍。后来我自己做了一次试验,分别采用ajax和传统的form提交的模式来删除一条数据??给我们的调试带来了很大的困难。5、另外,像其他方面的一些问题,比如说违背了url和资源定位的初衷。例如,我给你一个url地址,如果采用了ajax技术,也许你在该url地址下面看到的和我在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。6、一些手持设备(如手机、PDA等)现在还不能很好的支持ajax,比如说我们在手机的浏览器上打开采用ajax技术的网站时,它目前是不支持的,当然,这个问题和我们没太多关系。8、ajax的几种框架目前我们采用的比较多的ajax框架主要有ajax.dll,ajaxpro.dll,magicajax.dll 以及微软的atlas框架。Ajax.dll和Ajaxpro.dll这两个框架差别不大,而magicajax.dll只是封装得更厉害一些,比如说它可以直接返回DataSet数据集,前面我们已经说过,ajax返回的都是字符串,magicajax只是对它进行了封装而已。但是它的这个特点可以给我们带来很大的方便,比如说我们的页面有一个列表,而列表的数据是不断变化的,那么我们可以采用magicajax来处理,操作很简单,添加magicajax之后,将要更新的列表控件放在magicajax的控件之内,然后在pageload里面定义更新间隔的时间就ok了,atlas的原理和magicajax差不多。但是,需要注意的一个问题是,这几种框架都只支持IE,没有进行浏览器兼容方面的处理,用反编译工具察看他们的代码就可以知道。除了这几种框架之外,我们平时用到的比较多的方式是自己创建xmlHttpRequest对象,这种方式和前面的几种框架相比更具有灵活性。另外,在这里还提一下aspnet2.0自带的异步回调接口,它和ajax一样也可以实现局部的无刷新,但它的实现实际上也是基于xmlhttprequest对象的,另外也是只支持IE,当然这是微软的一个竞争策略。9.ajax应用举例以上内容是转载高人写的资料,下面我将我在项目中实际应用给出个例子,这个例子是这样的:我参与的一个项目的值班安排模块里,选择值班人时,弹出的是个联系人树型TreeView结构图,点开哪个部门,然后部门下的联系人就展开了,原先是这样的,选择好某些联系人后,哪天白天或晚上的值班人就是这样的格式”小A,小B”,但是现在要求这样的格式”小A(部门一),小B(部门二)”这里假设小A属于部门一,小B属于部门二。由于选择联系人是纯前台javascript的操作的,这里要通过联系人userlist表中的部门id,来取得部门的名称,也就是通过前台取后台的数据,这个在系列五里我也阐述过,下面给出代码:var param= "date=<%=stryear%>/<%=strmonth%>/" + x <%=stryear%><%=strmonth%>+"&Type=" + type+"&Other=" + eval_r("formData.RBOTHER"+x+".value")+"&ZBRY=" + eval_r("formData.RBZBRY"+x+".value")+"&ZBRYID=" + eval_r("formData.RBZBRYID"+x+".value")+"&Demo=" + eval_r("formData.RBDEMO"+x+".value")+"&id=" + eval_r("formData.RBZBID"+x+".value");//传递的参数var retVal = window.showModalDialog( "chooseUsers.asp?"+param,this, "dialogWidth=280px; dialogHeight=500px; help=no; status=no; scroll=no; resizable=yes; ");//弹出对话框取得联系人//ajax调用服务器端方法取到部门名称if(retVal ["userIds"]!=""&& retVal ["userIds"]!=null)//联系人id集合格式1,2,3,4{var PostUrl=" ../../../Application/CallBoard/GetDepartMentByUid.aspx?userIDs="+objRetVal["userIds"]+"";//后台处理页面urlxmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//新建一个xmlhttprequest对象xmlHttp.open("POST", PostUrl, false);xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xmlHttp.send("");var builder= xmlHttp.responseText; //将值传递回来,拼成了新格式eval_r("formData.RBZBRY"+x+".value = "" +builder+""");// formData.RBZBRY为一文本控件,将显示值班人员新格式}}相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!推荐阅读:Ajax请求async有哪些方
AJAX的原理—如何做到异步和局部刷新
如何做到异步和局部刷新?下面小编就为大家带来一篇AJAX的原理—如何做到异步和局部刷新。现在分享给大家,也给大家做个参考。Overriew: onReadyStateChange被回调函数赋值,则能实现异步调用,回调函数直接操作DOM,则能实现局部刷新。那么XMLHttpRequest的onReadyStateChange如何知道服务ready了呢?状态如何change了呢(观察者模式)?则是通过客户端对服务的状态询问(定期轮询)所实现的。详解:1. XMLHttpRequest 负责与服务器端的通讯,其内部有很多重要的属性:readyStatus=4,status=200等等。当XMLHttpRequest的整体状态并且保证它已经完成(readyStatus=4),即数据已经发送完毕。然后根据服务器的设定询问(类似于客户端会轮询服务器的返回状态,仍然是http短连接,并非长连接的服务器端push)请求状态,如果一切已经就绪(status=200),那么就执行需要的操作。操作一般就是直接操作DOM,所以AJAX能做到所谓的“无刷新”用户体验。2. 那么在AJAX客户端如何做到的异步呢?实际上就是Javascript的回调函数起的作用提供一个回调JavaScript函数,一旦服务器响应可用,该函数就被执行业务函数:第一行定义了JavaScript回调函数,一旦响应就绪它就自动执行,而req.open()方法中所指定的“true”标志说明想要异步执行该请求。一旦服务器处理完XmlHttpRequest并返回给浏览器,使用req.onreadystatechange指派所设置的回调方法将被自动调用。回调函数:上面是我整理给大家的,希望今后会对大家有帮助。相关文章:深入浅析Nginx实现AJAX跨域请求问题AjaxToolKit之Rating控件的使用方法基于Ajax技术实现文件上传带进度条
ajax的工作原理是什么(附图解)
本篇文章主要和大家讲述ajax的工作原理,具有一定参考价值,感兴趣的朋友可以了解一下,希望对你有所帮助。 Ajax指Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。而实现的原理基础就是:网页DOM对象可以精确地对网页中的部分内容进行操作、XML作为单纯的数据存储载体使得客户端与服务器交换的只是网页内容的数据而没有网页样式等等的附属信息、XMLHttpRequest是与浏览器本身内置的request相互独立的与服务器交互的请求对象。 网页应用Ajax与服务器交互的抽象过程如下图: 过程详解: 1: 要使用Ajax技术,基础中的基础,就是要创建一个XMLHttpRequest对象,无它就没有异步传输的可能:var xmlhttp;if (window.XMLHttpRequest) { //检查浏览器的XMLHttpRequest属性,如果为真则支持XMLHttpRequest// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 浏览器执行代码xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } 2:在网页中为某些事件的响应绑定异步操作:通过上面创建的xmlhttp对象传输请求、携带数据。在发出请求前要先定义请求对象的method、要提交给服务器中哪个文件进行请求的处理、要携带哪些数据、是否异步。 其中,与普通的request提交数据一样,这里也分两种方法:GET/POST xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",); xmlhttp.send();xmlhttp.open("POST","/try/ajax/demo_post2.php","Content-type","application/x-www-form-urlencoded");xmlhttp.send("fname=Henry&lname=Ford"); 3:服务器收到请求后,把附带的数据作为输入传给处理请求的文件,例如这里:把fname=Henry&lname=Ford作为输入,传给 /try/ajax/demo_get2.php 这个文件。然后文件根据传入的数据做出处理,最终返回结果,通过response对象发回去。客户端根据xmlhttp对象来获取response内容,然后调用DOM对象根据response内容来局部修改网页内容。xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200)//请求处理完毕且状态为成功 { document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//用response内容来修改DOM中的元素的内容 } 其中,response的类型有两种:字符串类型和XML文本。两种回应的不同提取如下:responseText 属性返回字符串形式的响应:document.getElementById("myp").innerHTML=xmlhttp.responseText;如果来自服务器的响应是 XML,需要作为 XML 对象进行解析,使用 responseXML :xmlDoc=xmlhttp.responseXML; //获取服务器响应的XML文本并转换得到XMLDOM对象txt="";x=xmlDoc.getElementsByTagName("ARTIST");//通过XMLDOM对象调用方法来获取XML对象中的内容for (i=0;i<x.length;i++) {txt=txt + x[i].childNodes[0].nodeValue + "<br>"; }document.getElementById("myDiv").innerHTML=txt;//把获取到的内容通过document对象更新到网页内容去容去 相关教程:ajax视频教程
怎么用AjaxFileUpload实现多文件上传
这次给大家带来怎么用AjaxFileUpload实现多文件上传,用AjaxFileUpload实现多文件上传的注意事项有哪些,下面就是实战案例,一起来看一下。本文重点给大家介绍AjaxFileUpload+Struts2实现多文件上传功能,具体实现代码大家参考下本文。单文件和多文件的实现区别主要修改两点,一是插件ajaxfileupload.js里接收file文件ID的方式二是后台action是数组形式接收1、ajaxFileUpload文件下载地址http://www.phpletter.com/Demo/AjaxFileUpload-Demo/2、引入jquery-1.8.0.min.js、ajaxFileUpload.js文件3、文件上传页面核心代码<body> <form action="" enctype="multipart/form-data"> <h2> 多文件上传 </h2> <input type="file" id="file1" name="file" /> </br> <input type="file" id="file2" name="file" /> </br> <input type="file" id="file3" name="file" /> </br> <span> <table id="down"> </table> </span> </br> <input type="button" onclick="fileUpload();" value="上传"> </form> </body> <script type="text/javascript"> function fileUpload() { var files = ["file1","file2","file3"]; //将上传三个文件 ID 分别为file2,file2,file3 $.ajaxFileUpload( { url : "fileUploadAction", //用于文件上传的服务器端请求地址 secureuri : false, //一般设置为false fileElementId : files, //文件上传的id属性 <input type="file" id="file" name="file" /> dataType : "json", //返回值类型 一般设置为json success : function(data, status) { var fileNames = data.fileFileName; //返回的文件名 var filePaths = data.filePath; //返回的文件地址 for(var i=0;i<data.fileFileName.length;i++){ //将上传后的文件 添加到页面中 以进行下载 $("#down").after("<tr><td height="25">"+fileNames[i]+ "</td><td><a href="downloadFile?downloadFilePath="+filePaths[i]+"">下载</a></td></tr>") } } }) } </script>以上fileElementId属性接收的files参数为["file1","file2","file3"]由于是多文件,所以我们需要修改ajaxfileupload.js 找到以下代码var oldElement = jQuery("#" + fileElementId); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr("id", fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form);修改为:for(var i in fileElementId){ var oldElement = jQuery("#" + fileElementId[i]); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr("id", fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); }4、文件上传Actionpublic class FileAction { private File[] file; //文件 private String[] fileFileName; //文件名 private String[] filePath; //文件路径 private String downloadFilePath; //文件下载路径 private InputStream inputStream; /** * 文件上传 * @return */ public String fileUpload() { String path = ServletActionContext.getServletContext().getRealPath("/upload"); File file = new File(path); // 判断文件夹是否存在,如果不存在则创建文件夹 if (!file.exists()) { file.mkdir(); } try { if (this.file != null) { File f[] = this.getFile(); filePath = new String[f.length]; for (int i = 0; i < f.length; i++) { String fileName = java.util.UUID.randomUUID().toString(); // 采用时间+UUID的方式随即命名 String name = fileName + fileFileName[i].substring(fileFileName[i].lastIndexOf(".")); //保存在硬盘中的文件名 FileInputStream inputStream = new FileInputStream(f[i]); FileOutputStream outputStream = new FileOutputStream(path+ "\" + name); byte[] buf = new byte[1024]; int length = 0; while ((length = inputStream.read(buf)) != -1) { outputStream.write(buf, 0, length); } inputStream.close(); outputStream.flush(); //文件保存的完整路径 // 如:D: omcat6webappsstruts_ajaxfileupload\uploada0be14a1-f99e-4239-b54c-b37c3083134a.png filePath[i] = path + "\" + name; } } } catch (Exception e) { e.printStackTrace(); } return "success"; } /** * 文件下载 * @return */ public String downloadFile() { String path = downloadFilePath; HttpServletResponse response = ServletActionContext.getResponse(); try { // path是指欲下载的文件的路径。 File file = new File(path); // 取得文件名。 String filename = file.getName(); // 以流的形式下载文件。 InputStream fis = new BufferedInputStream(new FileInputStream(path)); byte[] buffer = new byte[fis.available()]; fis.read(buffer); fis.close(); // 清空response response.reset(); // 设置response的Header String filenameString = new String(filename.getBytes("gbk"),"iso-8859-1"); response.addHeader("Content-Disposition", "attachment;filename="+ filenameString); response.addHeader("Content-Length", "" + file.length()); OutputStream toClient = new BufferedOutputStream(response.getOutputStream()); response.setContentType("application/octet-stream"); toClient.write(buffer); toClient.flush(); toClient.close(); } catch (IOException ex) { ex.printStackTrace(); } return null; } /** * 省略set get方法 */ }5、struts配置<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <package name="ajax_code" extends="json-default"> <!-- 文件上传 --> <action name="fileUploadAction" class="com.itmyhome.FileAction" method="fileUpload"> <result type="json" name="success"> <param name="contentType">text/html</param> </result> </action> </package> <package name="jsp_code" extends="struts-default"> <!-- 文件下载 --> <action name="downloadFile" class="com.itmyhome.FileAction" method="downloadFile"> <result type="stream"> <param name="contentType">application/octet-stream</param> <param name="inputName">inputStream</param> <param name="contentDisposition">attachment;filename=${fileName}</param> <param name="bufferSize">4096</param> </result> </action> </package> </struts>浏览器中输入:http://localhost:8080/struts_ajaxfileupload/index.jsp 即可进行文件上传如图:相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!推荐阅读:Ajax和jsonp在项目中的实战总结只需四步即可实现ajax发送异步请求
背面为JAXIS STYLISH WATCH 的是什么的表?
jaxis是表的品牌 制造商 。sun flame是贩售商。属于精工表,样子还不错,适合戴着玩玩.和真正的表相比。。。还是算了。我在日本买过一块 也就2000日元。淘宝上也有什么国内组装货 和这个价格差不多 但是质量真的差远了
struts2中,jsp页面通过ajax访问了action,action如何返回一个json数据给这个jsp页面,
后台返回JsonConvert.SerializeObject(object value)这样的json数据应该可以using Newtonsoft.Json.Converters;json在这个命名空间下
请帮我翻译SoulJaxMisslim的新歌 记念日 的歌词好吗?非常感谢!(附日语歌词)
SoulJa×Misslim - 记念日 作词∶呉田軽穂/SOULJA 作曲∶呉田軽穂 あなたを信じてる 瞳を见上げてる ひとり残されても あなたを思ってる 君と俺が出会った日から もうそれほど経つのだろうか? 今じゃ もう一心同体みたいに互いの存在が当たり前 みたいに 昔みたいにはもう手をつなぐくらい癖みたいなもん だけど 何故か気持ちをコトバに出来づらくなったが ホントは 今でも手をつないだだけで 君からのメールが入るだけで、 待ち合わせ 君见つけるだけで どこか気持ちは まるで初めて 海で潮の香りするような 初めての日の出を见るような 今になっちゃ 照れくさい気持ち この场借り いざ賛美 おかえりなさいと言えることの幸せ 闻き惯れた声と当たり前のぬくもり 今日が未来の思い出になって 过ぎ去って行く前に なぜこんなこと 気づかないでいたの 探し続けた爱がここにあるの 木漏れ日がライスシャワーのように 手をつなぐ二人の上に降り注いでる あなたを信じてる 瞳を见上げてる ひとり残されても あなたを思ってる 明日を信じてる あなたと歩いてる ありふれた朝でも 私には记念日 俺だって 头じゃわかってんだ この何気ないひと时の大切さ 例えば、おまえが俺に何気なく言う「お帰り」ってコトバ 君は 何気なく别に深い意味もなく俺にくれた言霊は 俺にとっちゃ マジ嬉しいんだ やっぱ そんな俺は変だよな? まぁ そんな事置いといて 君との日々も过ぎてく中で 毎月の记念日 このごろ忘れがちで たまにはすっぽかしXXXそんな寂しい気持ちを 君にさせちまってマジに申し訳ないと思ってるけど そういうの俺 苦手なんだよっていう言い訳を言い続け 所诠照れとか ただの逃げ マジ ホントは君に伝えてぇ 毎月のやつよりも every single day が 始めて君と出会ってから 初めて手をつないだ日から 初めて君の髪が 俺の颜をくすぐった日から 毎日が おかえりなさいと言えることの幸せ 闻き惯れた声と当たり前のぬくもり 今日が未来の思い出になって 过ぎ去って行く前に あなたを信じてる あなたを爱してる 心が透き通る 今日の日が记念日 今日を信じてる あなたがそばにいる。 ありふれた朝でも 私には记念日 明日を信じてる あなたがそばにいる ありふれた朝でも 二人には记念日SoulJa × Misslim -记念日期 词的工作:呉田軽穂/ SOULJA 作曲家:呉田軽穂 你是否认为你的眼睛是最多见 您正在独自思考 从一天,我遇见你,并 我就这样吗? 现在 我喜欢alteregoism给予在场的情况下互相 喜欢 我喜欢旧的手像连接长期习惯! 但是 为什么我有一个非常困难的话做的 但是,现在才手牵着手 您只收取邮件的 你只要保持上见 我觉得第一次 的气味海洋潮 见茹第一次日出现在我喜欢 我觉得不好意思当你实际赞扬场 高兴地说欢迎 碘化钾惯闻声音和温暖的自然 今天是内存的未来 过衣服,然后走开 为什么没有注意到这些东西 他是在这里寻找爱 阳光通过淋浴像赖斯 双方携手合作是挂在 你是否认为你的眼睛是最多见 您正在独自思考 你相信在明天,我与你走 记念平常的早晨,但我 现在我知道我头 一个无辜的人是这一点的重要性时 例如,你能告诉我随便, “欢迎回来”刚才的话 您 在一个偶然别给我以深刻的Kotodama 我已经采取了 真的很高兴俺是YAPPA 我很奇怪? 噢我离开它 的日子你还记念过一天的每月GITEKU 在这些日子里往往忘记 没有出现三十偶尔,我感到孤独 专业委员会っ你必须要认真和我很抱歉 这是我 我是一个穷人的借口说 非常害羞,或只是一个地方逃避诠 伝ETEE你真的严重 每个月比家伙,每一天 从一开始就与你会晤 手牵着手第一次在第一天的你的头发 我每天的日期titillation的颜 高兴地说欢迎 碘化钾惯闻声音和温暖的自然 今天是内存的未来 过衣服,然后走开 你认为你是爱 今天是一天的透明的心,记念 我认为我必须要你周围。 记念平常的早晨,但我 我认为我必须要你周围 但是,这两个普通的上午,记念
ajax在joomla中的原生态应用代码
今天笔者在这里讲一讲使用joomla自带的mootoolsjavascript库的实现ajax,由于是自带库,所以不用管有没有jquery,那么怎么实现呢,首先建立一个ajax的获取按钮,一般我们都是在组件的编辑中用到,所以文件一般在views你的视图 mpldefault.php里面:复制代码代码如下:<inputtype="button"id="ajaxButton"value="Get方式"/><divid="someID"></div>$doc=&JFactory::getDocument();$script=<<<SCRIPTwindow.addEvent("domready",function(){$("ajaxButton").addEvent("click",function(){newAjax("index.php?option=com_category&controller=category&task=aj&format=ajax",{method:"get",update:"someID"}).request();});});SCRIPT;input这一行是一个获取ajax的按钮,接着是显示返回数据的div层,下面就是使用ajax的mootools代码,简单说下,这里是通过getDocument类方法添加js到文档head里面,注意这里$是代表mootools类库,ajax里面的网址参数首先是组件名,控制器名,执行的方法aj,这个写在控制器里面,就是点击后执行的方法,需要写返回数据,最后就是返回数据类型,这里必须是ajax,否则会把整个文档都返回,我们这里只要aj方法的返回数据部分.有两个参数,get是获取数据方式,someID是绑定的返回数据显示id,这都是必须的.ajax使用不是必须的,但是有时候不得不用,如果使用原生态的,我想加载还是很快的,mootools库笔者也没有用过,只是照猫画虎,这里毕竟是提供了一种实现ajax的方法,怎么实现POST方法呢,只需要添加相应表单元素即可.在这里笔者就不多说了,因为用的不是很多.好了,就讲到这里,就不提供例子了,如果你需要可以在遇到编辑表单元素时候试试代码什么的都很短,copy一下就好了!
为什么Ajax的请求会一次点击多次提交
这次给大家带来为什么Ajax的请求会一次点击多次提交,Ajax请求一次点击多次提交的注意事项有哪些,下面就是实战案例,一起来看一下。页面中的按钮的type是submit的: <input type="submit" value="Create" id="submit" />ajax的请求,在JQuery中是:$(function () {$("#submit").click(function () {var createGenreForm = $("#createGenreForm");if (createGenreForm.valid()) {var obj = {Name: $("#Name").val(),Description: $("#Description").val()};var jsonSerialized = JSON.stringify(obj);$.ajax({type: "POST",url: createGenreForm.attr("action"),dataType: "json",contentType: "application/json; charset=utf-8",data: jsonSerialized,success: function (result) {alert(result.Message);},error: function (error) {alert("There was an error posting the data to the server: " + error.responseText);}});}});});发生两次提交的原因是在执行完ajax请求后,并没有阻止submit的行为,所以解决方法有两种:1、不使用type为submit类型的按钮,而是使用type是button的按钮。2、在$("#submit").click函数中,最后加一行return false;,即可阻止submit。一点说明:为什么在标题中要嵌入英文?原因是为了能够让国外的网友能查询到这篇文章。平常在Google上查资料的时候,经常参考国外网友的博客,帮助我解决了很多问题,所以我也想让他们能够参考我写的内容。当然文中我不可能全部译为英文,所以我尽量把代码粘全,靠代码说话吧。相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!推荐阅读:ajax怎样提交form表单与实现文件上传ajax后台success上传的json数据如何处理
ajaxSubmit提交不执行后台函数
action有定义,是这个action的result没有定义。
php问题 confirm在ajax中如何使用?
<input type="button" value="删除" name="del" id="submit"/><script>$(function(){ $("#submit").click(function(){ var a = confirm("确认删除?"); //弹出confirm框 if(a == true){ //确认删除 $.ajax({ //ajax代码 }) }else{ } return false; });})</script>
thymeleaf实现ajax请求的两种方式
注意,对应的Controller类不能使用 @RestController 注解。 具体参考: https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#rendering-template-fragments 布局方式同fragment方式,webController方法中有改动: 具体参考: https://stackoverflow.com/questions/20982683/spring-mvc-3-2-thymeleaf-ajax-fragments tinytongtong / spring-thymeleaf
jsp ajax提交form表单给servlet获取到的数据为空是什么原因呢
因为ajax提交时,必须显示的把表单值设上,你看看你写的这句:data:{ "action":"get", "dz":"jbxx" }里面没pwd这个值,所以System.out.println(request.getParameter("pwd"));是null
ext 表单提交或ajax请求返回的信息中文乱码,后台response和前台页面的编码都设置为uft-8了
表单提交到后台有乱码解决: ajax提交的时候用‘data="+encodeURIComponent("测试");后台request的时候用String data=new String(request.getParameter("data").getBytes("iso-8859-1"), "UTF-8");你说返回到前台的信息中文乱码,我想请问你,你怎么接收来自后台的返回信息的呢?
ajax结合豆瓣搜索进行分页如何实现(附代码)
这次给大家带来ajax结合豆瓣搜索进行分页如何实现(附代码),ajax结合豆瓣搜索进行分页实现的注意事项有哪些,下面就是实战案例,一起来看一下。使用豆瓣api,得到分页结果。相当于从后台数据库获得的结果一样。所不同的是,没法事先知道页数。虽然通过请求api可以获得总页数,但由于ajax是异步的,所以对于分页一开始就要给出总页数来说,这是没有意义的。我使用了一个固定总页数65(正是搜索javascript书籍返回的总页数)。所以其他书籍是并不是65页,会出现多页或者少页的情况,这并不是bug。特点1,全程不需要接触后台,前端独立就可以(我找过好长时间都没找过完整的例子)。 2,使用了bootstrap的pagination制作页码和panel制作放置结果的面板。 代码如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.css" /><!-- 换成自己的目录 --> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> </head> <style> .pagination> li > a { cursor: pointer; } .pagination > li > span { margin-left: 0; color: #ccc; background-color: transparent; cursor: default; } .pagination > li > span:hover { color: #ccc; background-color: transparent; cursor: default; } .m20 { margin: 20px 0; } </style> <body> <p class="container-fluid"> <p class="col-md-12"> <p class="panel panel-default"> <p class="panel-heading"> <form class="input-group"> <input type="text" value="javascript" class="form-control" id="bookName" placeholder="请输入书名" required="required"/> <span class="input-group-btn"> <button class="btn" id="search">搜索</button> </span> </form> </p> <p class="panel-body"> <table class="table table-bordered"> <thead> <th>书名</th> <th>作者</th> <th>出版日期</th> <th>平均分</th> <th>价格</th> </thead> <tbody id="tbody"> </tbody> </table> </p> </p> <p class="row"> <p class="col-md-6"> <p id="test"></p> </p> <p class="col-md-4"> <p class="input-group m20"><!-- 保持与#test中的.pagination对齐 --> <input type="text" class="form-control" id="page"/> <span class="input-group-btn"> <button class="btn btn-default" id="jumpToPage">GO</button> </span> </p> </p> </p> <p id="result" class="alert alert-info"></p> </p> </p> <script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script> <!-- 换成自己的目录 --> <script type="text/javascript" src="js/bootstrap.js" ></script> <!-- 换成自己的目录 --> <script type="text/javascript"> var partPageModule = ( function ( $ ) { var initPager = null,// 初始换分页函数 setPagerHTML = null,// 生成分的页HTML代码 pageClick = null,//每一页按钮的点击事件 ajax = null, // ajax请求后台数据 renderButton = null, $content = $( "" ) // 动态生成的页码 ; /* 功能:完成初始化 * @totalPages 总页数,从后端获取 * @currentPage 当前所在的页数 */ initPager = function ( totalPages, currentPage ) { $content = setPagerHTML({ currentPage: currentPage, totalPages: totalPages, pageClick: PageClick }) $( "#test" ).empty().append( $content );// 得到分页后添加到#test $( "#jumpToPage" ).click( function ( e ) {// 绑定GO按钮的点击事件 e.preventDefault(); PageClick( totalPages, $("#page").val() * 1); }) $( "#page" ).keyup( function ( e ) {// Enter键绑定搜索事件 if ( e.keyCode === 13 ) { $( "#jumpToPage").trigger( "click" ); } }) $( "#result" ).html( "你点击的是第" + currentPage + "页") }; /* 功能:页码点击事件。重新生成所有页码,并且使用ajax获取数据 */ PageClick = function ( totalPages, currentPage ) { initPager( totalPages, currentPage ); ajax( currentPage );// 使用jsonp请求豆瓣 } ajax = function ( currentPage ) { var $input = $( "#bookName" ), bookName = "", $tbody = $( "#tbody" )// totalPages ; bookName = $input.val(); if ( !bookName ) { // 如果没有输入,就不要发送请求了 $input.focus(); return; } else { $.ajax({ type: "get", url: "https://api.douban.com/v2/book/search",// 豆瓣图书api dataType: "jsonp", data: { q: bookName, start: ( parseInt( currentPage )-1 )*20 || 0 }, success: function ( data ) { var html = "", books = data.books ;// totalPages = Math.ceil( data.total / data.count ); books.forEach( function ( value, index ) { html += "<tr>" + "<td><a href="" + value.alt + "">" + value.title + "</a></td>" + "<td>" + value.author + "</td>" + "<td>" + value.pubdate + "</td>" + "<td>" + value.rating.average + "</td>" + "<td>" + value.price + "</td>" + "</tr>"; }) $tbody.html( html ); } }) }// return totalPages; } setPagerHTML = function ( options ) { var currentPage = options.currentPage, totalPages = options.totalPages, pageClick = options.pageClick, $content = $("<ul class="pagination"></ul>"), startPage = 1, nextPage = currentPage + 1,//不需要考虑超出问题,后面有条件 prevPage = currentPage - 1 ; /* 逻辑处理,根据点击的不同的页生成不同的ul */ if ( currentPage == startPage ) {//当前页是起始页 $content.append( "<li><span>首页</span></li>" ); // 首页不可用 $content.append( "<li><span>上一页</span></li>" ); // 上一页不可用 } else { // 不是起始页 $content.append( renderButton( totalPages, 1, pageClick, "首页") ); // 生成首页并绑定事件 $content.append( renderButton( totalPages, prevPage, pageClick, "上一页") ); // 生成上一页并绑定事件 } if ( totalPages <=5 && currentPage <= 5 ) {// 总页数小于5,当前页小于5,全部生成页码 for ( var i = 1; i <= totalPages; i++ ) { if( i === currentPage ) { $content.append( "<li class="active><span>" + i + "</span></li>" );// 当前页不可点击 } else { $content.append( renderButton( totalPages, i, pageClick, i) );// 其他页可以点击 } } } else if ( totalPages > 5 && totalPages - currentPage <= 2 ) {// 总页数大于5,当前页接近总页数,前面显示...,后面显示到结尾的页码 $content.append( "<li><span>...</span></li>" ); for( var i = totalPages - 4; i <= totalPages; i++ ) { if ( i === currentPage ) { $content.append( "<li class="active"><span>" + i + "</span></li>" ); } else { $content.append( renderButton( totalPages, i, pageClick, i) ); } } } else if ( totalPages > 5 && currentPage > 3) {// 总页数大于5,当前页在中间,前后生成...,生成中间页码 $content.append( "<li><span>...</span></li>" ); for ( var i = currentPage - 2; i < currentPage + 2; i++ ) { if ( i === currentPage ) { $content.append( "<li class="active"><span>" + i + "</span></li>" ); } else { $content.append( renderButton( totalPages, i ,pageClick, i) ); } } $content.append( "<li><span>...</span></li>" ); } else if ( totalPages > 5 && currentPage <= 3 ) {// 总页数大于5,当前页接近第一页,显示前面页码,后面显示... for ( var i = 1; i <= 5; i++ ) { if ( i === currentPage ) { $content.append( "<li class="active"><span>" + i + "</span></li>" ); } else { $content.append( renderButton( totalPages, i ,pageClick, i) ); } } $content.append( "<li><span>...</span></li>" ); } if ( currentPage == totalPages ) {//当前页是末页 $content.append( "<li><span>下一页</span></li>" ); // 下一页不可用 $content.append( "<li><span>末页</span></li>" ); // 末页不可用 } else { // 不是起始页 $content.append( renderButton( totalPages, nextPage, pageClick, "下一页") ); // 生成首页并绑定事件 $content.append( renderButton( totalPages, totalPages, pageClick, "末页") ); // 生成上一页并绑定事件 } return $content; } renderButton = function ( totalPages, goPageIndex, eventHander, text ) { var $gotoPage = $( "<li><a title="第" + goPageIndex + "页">" + text + "</a></li>" ); $gotoPage.click( function () { eventHander( totalPages, goPageIndex ); }) return $gotoPage; } return { init: initPager, ajax: ajax } }(jQuery)) $( function () { $( "#search" ).click( function ( e ) { e.preventDefault(); var totalPage = partPageModule.ajax(1);// 由于ajax是异步的, totalPage = totalPage || 65;// 所以这个总页数是不准确的。一般这个数据是后端返回的。这里的65是javascript搜索的页数,不同的书籍搜索结果不一样,由于ajax异步执行,所以这里会默认为65。这里不是bug。 partPageModule.init( totalPage, 1 ); }) $( "#bookName" ).keyup( function ( e ) { if ( e.keyCode === 13 ) { $( "#search" ).trigger( "click" ); } }) $( "#search" ).trigger( "click" ); }) </script&g
解释js ajax和cgi各是什么工具?在b/s中起什么作用
1、AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术,核心对象XMLHTTPRequest。该对象是浏览器API,支持向http服务器发送get post等http协议规定的请求方式。该方式不会重载页面,无刷新交换数据。是客户端browser与浏览器通讯的方式。执行宿主在浏览器的javascript引擎里面。2、cgi是服务器端的一段脚本。该脚本执行时信息输入来自管道,服务器会把请求输入重定向到cgi脚本的标准输入,把cgi脚本的执行的标准输出作为请求的响应!cgi也是一种形式上的后台接口!
使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页
先给大家展示下运行效果图: 1.后台action产生json数据。List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate); int totalRows = blackList.size(); StringBuffer sb = new StringBuffer(); sb.append("{"totalCount":""+totalRows+"","); sb.append(""jsonRoot":["); for (int i=0;i<blackList.size();i++) { LBlack blackInfo = (LBlack)blackList.get(i); sb.append("{"id":""+ blackInfo.getId()); sb.append("","); sb.append(""mobile":""+ blackInfo.getMobile()); sb.append("","); sb.append(""province":""+ blackInfo.getProvince()); sb.append("","); sb.append(""gateway":""+ blackInfo.getGateway()); sb.append("","); sb.append(""insertTime":""+ blackInfo.getInsertTime()); sb.append("","); sb.append(""remark":""+ blackInfo.getRemark()); sb.append("""); sb.append("},"); } sb.deleteCharAt(sb.lastIndexOf(",")); // 删去最后一个逗号 sb.append("]}"); HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType("text/plain"); response.getWriter().print(sb); 2.struts.xml相关配置<action name="blackList" class="blackAction" method="blackList"> <!--plaintext用于显示页面原始代码的结果类型--> <result type="plainText"> <param name="charSet">UTF-8</param> <param name="location">/WEB-INF/jsp/manage/black.jsp</param> </result></action>3.js获取json数据分页显示function getJSONData(pn) { // alert(pn); $.getJSON("blackList.ce", function(data) { var totalCount = data.totalCount; // 总记录数 var pageSize = 10; // 每页显示几条记录 var pageTotal = Math.ceil(totalCount / pageSize); // 总页数 var startPage = pageSize * (pn - 1); var endPage = startPage + pageSize - 1; var $ul = $("#json-list"); $ul.empty(); for (var i = 0; i < pageSize; i++) { $ul.append("<li class="li-tag"></li>"); } var dataRoot = data.jsonRoot; if (pageTotal == 1) { // 当只有一页时 for (var j = 0; j < totalCount; j++) { $(".li-tag").eq(j).append("<span class="col1"><input type="checkbox" value=""+parseInt(j + 1)+""/></span>") .append("<span class="col2">" + parseInt(j + 1) + "</span>").append("<span class="col3">" + dataRoot[j].mobile + "</span>").append("<span class="col4">" + dataRoot[j].province + "</span>").append("<span class="col5">" + dataRoot[j].gateway + "</span>").append("<span class="col6">" + dataRoot[j].insertTime + "</span>").append("<span class="col7">" + dataRoot[j].remark + "</span>") } } else { for (var j = startPage, k = 0; j < endPage, k < pageSize; j++, k++) { if( j == totalCount){ break; // 当遍历到最后一条记录时,跳出循环 } $(".li-tag").eq(k).append("<span class="col1"><input type="checkbox" value=""+parseInt(j + 1)+""/></span>") .append("<span class="col2">" + parseInt(j + 1) + "</span>").append("<span class="col3">" + dataRoot[j].mobile + "</span>").append("<span class="col4">" + dataRoot[j].province + "</span>").append("<span class="col5">" + dataRoot[j].gateway + "</span>").append("<span class="col6">" + dataRoot[j].insertTime + "</span>").append("<span class="col7">" + dataRoot[j].remark + "</span>") } } $(".page-count").text(pageTotal); })}function getPage() { $.getJSON("blackList.ce", function(data) { pn = 1; var totalCount = data.totalCount; // 总记录数 var pageSize = 10; // 每页显示几条记录 var pageTotal = Math.ceil(totalCount / pageSize); // 总页数 $("#next").click(function() { if (pn == pageTotal) { alert("后面没有了"); pn = pageTotal; } else { pn++; gotoPage(pn); } }); $("#prev").click(function() { if (pn == 1) { alert("前面没有了"); pn = 1; } else { pn--; gotoPage(pn); } }) $("#firstPage").click(function() { pn = 1; gotoPage(pn); }); $("#lastPage").click(function() { pn = pageTotal; gotoPage(pn); }); $("#page-jump").click(function(){ if($(".page-num").val() <= pageTotal && $(".page-num").val() != ""){ pn = $(".page-num").val(); gotoPage(pn); }else{ alert("您输入的页码有误!"); $(".page-num").val("").focus(); } }) $("#firstPage").trigger("click"); })}function gotoPage(pn) { // alert(pn); $(".current-page").text(pn); getJSONData(pn)}$(function() { getPage();})ps:JAVA+JQuery实现异步分页最近一个项目要求实现异步分页,简单的写了一下,不好的请指出~/***分页类*/public class PageBean { publicint rowCount = 0; // 总记录数 publicint currentPage = 1;// 当前页数 publicint sizePerPage = 20;// 每页显示条数 publicint pageCount = 0;// 总页数 publicString pageURL;// 请求URL publicString pageDisplay;// JSP页面显示 publicString pageStyle = "numberStyle";// 分页样式 publicint pagePreOffset = 10;// 向前偏移量 publicint pageNextOffset = 9;// 向后偏移量 publicString pageCss;// 预留 publicString getPageCss() { returnpageCss; } publicvoid setPageCss(String pageCss) { this.pageCss = pageCss; } publicString getPageStyle() { returnpageStyle; } publicvoid setPageStyle(String pageStyle) { this.pageStyle = pageStyle; } publicint getPagePreOffset() { returnpagePreOffset; } publicvoid setPagePreOffset(intpagePreOffset) { this.pagePreOffset = pagePreOffset; } publicint getPageNextOffset() { returnpageNextOffset; } publicvoid setPageNextOffset(intpageNextOffset) { this.pageNextOffset = pageNextOffset; } publicString getPageDisplay() { String nextClick=" onclick="ajaxpage(""+this.pageURL+ "?currentPage=" + (this.currentPage + 1)+"");return false;" "; String preClick=" onclick="ajaxpage(""+this.pageURL+ "?currentPage=" + (this.currentPage - 1)+"");return false;" "; String firstClick=" onclick="ajaxpage(""+this.pageURL+ "?currentPage=1");return false;" "; String lastClick=" onclick="ajaxpage(""+this.pageURL+ "?currentPage=" + (this.getPageCount())+"");return false;" "; String onChange=" onchange="ajaxpage(""+this.pageURL+ "?currentPage=" + (1)+"");return false;" "; StringBuffer pageString =new StringBuffer(); pageString.append("<div class=""+ this.pageStyle +""><span >"); // 数字样式 if("numberStyle".equalsIgnoreCase(this.pageStyle)) { // 如果只有一页,不需要分页 if(this.getPageCount() ==1) { // pageString.append("<strong> 1</strong> "); }else { if(this.currentPage >1) {// 如果当前页数大于1,<< <可用 pageString.append("<a class="pagination-first" "+firstClick+" title="首页" href="" + this.pageURL +"?currentPage=1"><<</a> "); pageString.append("<a class="pagination-prev" "+preClick+"title="上一页" href="" + this.pageURL +"?currentPage=" + (this.currentPage -1) +""><</a> "); }else { pageString .append("<a class="pagination-first"><<</a> "); pageString .append("<a class="pagination-prev"><</a> "); } // 定义向前偏移量 intpreOffset = this.currentPage -1 > this.pagePreOffset ?this.pagePreOffset :this.currentPage -1; // 定义向后偏移量 intnextOffset = this.getPageCount() -this.currentPage >this.pageNextOffset ?this.pageNextOffset :this.getPageCount() -this.currentPage; // 循环显示链接数字,范围是从 当前页减向前偏移量 到 当前页加向后偏移量 for(int i = (this.currentPage - preOffset); i <= (this.currentPage + nextOffset); i++) { String numClick=" onclick="ajaxpage(""+this.pageURL+ "?currentPage=" + (i)+"");return false;" "; if(this.currentPage == i) {// 当前页要加粗显示 pageString .append("<strong style="color:black;border:0">" + i +"</strong> "); }else { pageString.append("<a "+numClick+"href=""+ this.pageURL +"?currentPage=" + i + "">" + i +"</a> "); } } // 如果当前页小于总页数,> >>可用 if(this.currentPage <this.getPageCount()) { pageString.append(&
JAX的故事情节
Jax是一名军官,就职于具有神秘色彩的美国特种部队。剧情中,他和Sonya供职于同一部队,是亲密的战友,彼此有着深厚的感情,有时候,Jax甚至是Sonya的直接领导。他们有着相同的使命,那就是追踪并剿灭长期危害地球安宁与和平的大型犯罪组织Black Dragon。在一次又一次的行动之中,Jax与Sonya逮捕了诸多该组织的重要头目,但同时,特种部队也付出了惨痛的代价,Jax和Sonya的很多队友也于行动中丧命。这一切的一切令Jax与Black Dragon领袖Kano彼此恨之入骨。能成为犯罪组织头目必定会有独到自处,Kano也不例外,他有着极强的反侦察能力,这使得在长期斗争中,Jax没有讨到半点便宜。可是,Jax也有他值炫耀的资本,那就是在一次行动中,Jax险些就能成功捉住Kano,最终后者死里逃生,但Kano的半边脸在与战斗中被Jax击成重伤,不得不依靠机械改造手术来维系容貌和生命,留下了不可磨灭的伤疤。在各种行动中,特种部队擒获了不少Black Dragon高层人物,其中包括No Face、Tasia、Jarek和Tremor。诸多帮手被抓令Kano在用人上感觉捉襟见肘。为了维持Black Dragon的正常运转,Kano决定对自己的战友实施营救。反侦查能力极强的Kano成功了,他在特种部队眼皮底下救走了No Face、Tasia、Jarek和Tremor等人。与此同时,Jax正在一次常规任务的返回途中,路上他遇到了自己的助手Gemini。Gemini将监牢的一片混乱及Kano同伴的成功越狱情况告知给了Jax,一颤之下,Jax意识到了事态的严重性。Gemini继续告诉Jax这些罪犯已经逃到了城东一处大仓库。Jax决定亲自前往仓库对Kano实施抓捕。出发不久Jax收到了来自探员Lieutenant Sanchez发送来的消息,原来后者已经带领小队前往仓库追捕Kano,他通知Jax尽快赶到配合行动。接到消息后,Jax加紧脚步,可是在赶到指定地点后,Jax却大惊失色,原来先前到达的Lieutenant Sanchez和他的队友已经全部遇害。根据作案手法判断,Jax认定凶手就是由Kano带领的Black Dragon成员。悲愤交加之下,Jax立誓要为死去的战友复仇。Jax愤怒的冲进了仓库内。越狱逃出的No Face突然出现并挡住了Jax的去路,显然来者不善。一场恶斗后,No Face死在了Jax拳下。再仔细搜索仓库之后,Jax断定Kano已经逃跑,而最有可能的逃生路线是仓库内的一处下水道。根据自己判断,Jax继续前进,不出他所料,追了不久他就又发现了目标,这一次被他遇到的同样是刚刚越狱成功的Black Dragon重要成员Tasia。又是一场恶斗,胜利仍旧是Jax。经过战友丧命和两场恶斗后的Jax略微失去了理智,他并没有呼叫援助而是继续孤身进入陷阱。行进途中,Gemini和Jax取得了联系。Gemini此时已经探测到了Jax的当前位置,他告知Jax下水道通往一座办公大楼,眼下大楼已经被Black Dragon所控制,成为了他们的一座指挥中心。进入Black Dragon的秘密指挥中心之后,Jax果然遇到了大批潜伏于此的Black Dragon匪徒。而在这里负责指挥的则是在Black Dragon的主要成员之一Jarek,在以前的多次行动之中,Jax和Jarek有过几次交手,双方彼此颇为熟悉又同时对对方恨之入骨。为了能够继续进行勘察工作,Jax像Jarek发起了进攻。双方的交战以Jax大获全胜的结局告终。Jax得以继续前进。仔细调查之后,Jax发现Kano及其他Black Dragon成员并不藏身于此,传送门。不惧风险的Jax穿过了传送门后发现自己置身于Outworld内荒废已久的遗忘之城Sinkiang(游戏里对这座城市的设定比较复杂,日后会另发博文详细介绍)。原来,Kano是想通过传送到Sinkiang以步入Outworld。显然,Kano不会贸然前往危机四伏的Outworld,他此来毕竟有不可告人的秘密。(本文的主人公Jax并不知晓Outworld,只是知道自己已经离开了地球,来到了一篇神秘国度)在Sinkiang调查过程中,Jax遇见了另一名Black Dragon重要成员——Jarek,后者此刻正驻守于此,眼见Jax到来,他立即发起攻击。在击败了Jarek之后,Jax感觉到此地必然隐藏的极大的秘密,和Black Dragon的新阴谋有关。果然,在经过自己搜查之后,Jax发现了一道神秘的传送门,穿过之后,他来到了Outworld。在这里Black Dragon早已布置了严密的防守,Jax在刚结束传送之后便遭到了Tremor的截击,而这次Jax再次经受住了考验,击败了Tremor,获得了继续前进的机会。沿着路一直前行(Jax并不知道Outworld,之时感觉到自己已经不在置身于地球内),Jax果然遇到了自己想要追寻的人——Kano。历尽千辛才赶到此处,Jax是不会放弃这次抓捕机会的。见到Jax到来,Kano道出了自己的阴谋,此时,他手中握有一枚红色的水晶,他向Jax介绍到,他手中的这枚水晶是一枚珍宝,名字叫做Eye of Chitian,其中蕴含强大的力量,借助这股力量不但能使拥有者获得超人的力量还可以为拥有者创造同往各处的传送门。显然,Kano是意图利用这枚宝物危害世界,Jax意识到Kano一旦成功启动宝物他不但能够随时逃走而且还将拥有自己难以匹敌的力量。情况危急,Jax顾不得搞清楚自己身处何处,立刻冲上前与Kano展开搏斗,抢夺Eye of Chitian。仇人间展开了殊死搏斗,最终技高一筹的依旧是 Jax。他成功俘虏了Kano,在仔细研究Eye of Chitian过后,他成功启动水晶,将自己传送回到地球,并将Kano带到特种部队监禁起来。就这样,他粉碎了Kano的一次阴谋,受到了特种部队上级的嘉奖。而Eye of Chitian被特种部队收走,着手对其进行研究。MK:特种部队的故事也就此高一段落。时间推移到MK1时代,被囚禁的Kano不久便利用自己娴熟的反侦察技巧成功越狱。特种部队立即对其进行抓捕,而此次负责的变为了Jax的亲密战友 Sonya。然后Sonya在一次抓捕行动中突然失去了联络,其队友也纷纷不知所踪,Jax顿时感到他们可能已陷入困境,于是当即决定前往救援。然而在赶往事发地点的途中,Jax惊讶的发现Sonya在最后一次通信时所说的Kano逃亡途中所登陆的小岛在地图上并不存在。带着疑惑,Jax逐渐接近事发地点。就在这时,他发现不远处飘着一艘小船,船上有一名男子。直觉告诉Jax这名男子可能会给自己提供自己想要的信息。接近之后,Jax认出这名男子原来就是大名鼎鼎的功夫影星Johnny Cage。Jax以特警的身份向Cage提出审问。而Cage给出的答复则让Jax摸不着头脑,他讲出的MK大赛、Outworld侵略者等消息Jax听上去感觉完全是胡话。Jax开始怀疑Cage的动机。而就在这时,Jax的对讲机突然响了,给他发来信息的正是他正在苦苦追寻的Sonya。在对讲机的另一面Sonya匆忙的讲到自己被卷入了一场比武大赛,已经和Kano一起被大赛的举办者绑架离开地球,来到了一个叫做Outworld的空间,眼下,她正在和Kano一起设法逃脱,说道这里,通话中断。事已至此,Jax终于相信了Cage的话,他想后者为自己之前的怀疑态度道了歉。Sonya 已经离开地球,且并没有有效的办法能够前往Outworld,Jax不得不暂时搁浅救援计划,返回特种部队回报消息,筹划下一步的行动。然而就在返程途中,Cage就遭到了来自Outworld侵略者的追杀(Shao Kahn筹划MK2大赛,决心铲除有实力的地球勇士),Jax出手相助。追杀Cage的正是我们非常熟悉的Kintaro,双方打得难解难分,直到 Raiden带领地球勇士感到之时,战局才发生了根本变化。Kintaro放弃追杀,通过传送门逃回Outworld,为了救Sonya,Jax又犯了莽撞的老毛病,他冲进传送门,进入到了Outworld。也就因为这样,才有了Jax参加MK2大赛的故事。在 Outworld之旅中,Jax和Raiden、Liu Kang、Kung Lao等勇士威武,参加了MK大赛,在大赛上,他见到了被俘虏的Sonya。最终,Liu Kang击败了Shao Kahn,粉碎了后者的阴谋,Jax也借机就出了Sonya,可是Kano趁乱逃脱了。尽管成功将Sonya救出,但Jax深感自己的任务远没有完成。一来成功脱逃的Kano必然会无时无刻威胁地球安危,另一方面,他也见识了自己生平所未见过的来自 Outworld的入侵者。在返回特种部队后,Jax将自己所经历和目睹的一切反映给了特种部队上级领导,可这样做的结果是上级领导完全不相信Jax口中描述的各式怪物,他们甚至将原本信赖有佳的Jax列入了怪人圈里。在反复数次解释无果后,Jax放弃了口舌之争,决心默默追随Raiden,保卫地球安危。时间推移到MK3,在获知Shao Kahn将要亲自率领部队入侵地球之后,Jax对自己的手臂实施了改造,他用一双由钢铁打造,依靠生物科技移植的臂膀代替了原本的双臂。这样做为的就是更有效的迎接外来侵略者的挑战。故事里,他追随Raiden积极抵抗入侵,最终成功粉碎了Shao Kahn的阴谋。Outworld的入侵让地球人重新认识了世界,特种部队也终于相信了Jax先前的回报,他们开始着手针对Outworld进行研究,成了Outworld研究部,Jax和Sonya被调配到新部门作为第一批探员开始工作。MK4 阶段,Jax和Sonya作为特种队员,身背一条重要使命——清剿Black Dragon最后的残党,他们的首要目标就是Jarek,他是现阶段可知的Black Dragon所剩的唯一头目。而与此同时,Edenia遭受了来自Netherrealm的入侵。作为Edenia的忠实盟友,Raiden号召地球勇士奔赴Edenia救援。Jax本打算响应Raiden,可是自己的战友Sonya在缉捕Jarek的过程中失踪了,这令Jax焦急万分。不久后Jax便接到可靠消息称Sonya已经追随Raiden去援助Edenia,原来Jarek获知Kano并没有死,眼下Kano本人正在Edenia,在追兵不断的窘迫情形下,Jarek决定前往投靠Kano,Sonya在追踪途中正好遇到了Raiden,在得知Edenia有难后便加入了Raiden组织的正义行动。Jax悬着的一颗心也终于放了下来,于是他也即可启程追随Raiden来到Edenia,一方面是要帮助Edenia对抗敌人,另一方面也是为了缉捕在逃的Jarek。到达Edenia后,Jax发现作为地球的Jarek在Edenia同样遭到了Netherrealm军队的追杀,大敌当前,Jax和Jarek暂时搁置争议,共同抵抗入侵者。在Raiden的带领下,地球勇士们奋勇的击败了Shinnok,粉碎了他吞并世界的阴谋。在Shinnok被击败后,为了防止Jarek危害社会,Jax要将其拘捕。Jarek自然不会束手就擒,他决心与Jax决议生死。最终,Jax击败Jarek,并将后者从悬崖上掷下。在完成自己的任务之后,Jax返回了地球。在此之后,特种部队Outworld研究部有了长足的发展,科学人员利用Jax夺回的Eye of Chitian之眼创造了传送门,能够供使用者自由穿梭于地球和Outworld。就此,特种部队正式踏入Outworld进行研究工作。在一次行动中,Jax和队友发现了被困于沙中的机器人Cyrax,他们将Cyrax救出并带回地球研究。很快,他们就研究透彻,通过修复将Cyrax恢复人形。就此,Cyrax加入了特种部队,成为了Jax身边的一名得力战友。故事推移到MK:死亡联盟。探员Cyrax和 Kenshi先后在进入Outworld执行任务时失去了联络,未能返回。身为长官,Jax焦急万分。令Jax没想到的是更大的麻烦接踵而至了,特种部队内部的核武器被人引爆,整个Outworld研究部被夷为平地,正在工作中的探员全部丧命,Jax因为爆炸之时恰好不在基地而幸运的活了下来。眼见自己努力创建的事业,以及朝夕相处的战友均化为南柯一梦,Jax怒不可遏,他发誓要找到作案者,让他血债血偿。在经过自己调查后,Jax认定作案凶手是Hus Hao。原来,Hsu Hao是犯罪组织Red Dragon潜藏在特种部队内部的间谍,长久以来,他潜伏工作完成的十分出色,蒙蔽了所有的眼睛。眼下,他以完成任务,成功逃回Outworld。Jax 意图立即实施追捕,可是特种部队建立的通往Outworld的传送门在爆炸中也毁于一旦。就在Jax进退两难之时,Jax接到了Raiden传来的信息,了解到了死亡联盟的相关消息,随后欣然接受了Raiden的邀请,与众人回合,一同前往Outworld讨伐死亡联盟。Jax此行的目的显然不仅仅只有这一个,他要亲手杀死Hsu Hao,为战友们报仇。来到Outworld之后,Jax获得了单独行动的机会,在精心调查之后,他找到了Red Dragon组织的基地。Jax想只要自己等在这里,就一定能够等到Hsu Hao出现。果不其然,Jax等到了返回交付任务的Hsu Hao,潜藏在暗处的Jax对后者实施了偷袭,他不仅一举打到Hsu Hao,并残忍的将Hsu Hao的机械心脏残忍的从身体了抛出,至后者于死地。彻底报了Hsu Hao假扮特种队员,破坏基地、残杀队友的恶行。了解了自己的心愿以后,Jax返回驻地,与队友们汇合,共同讨伐死亡联盟。战斗远比预期的要险恶,Tarkatan人投靠了死亡联盟,在指示下,对正义勇士进行了围剿。由于敌我差距过于悬殊,包括Jax在内的勇士们死于了战斗之中,只有Raiden获得了直面死亡联盟的机会。Onaga 重新掌控Outworld之后,施法复活了并控制在反抗死亡联盟中丧命的勇士,这其中自然包括Jax在内。Onaga利用这些人帮助自己抵抗异己,实施入侵。直到获得了Liu Kang及Ermac的救助后,Jax和其他人方才恢复了本来的意识。之后Jax与众人一道,为击败Onaga,肃清威胁而努力。Onaga 被打败以后,Jax与Sonya返回了特种部队。不久,Sonya与Jax接到了上级指派的新任务。Sektor在失去Lin Kuei大主教的地位后,逃窜到日本,组建了属于自己的杀手组织Tekunin。Tekunin完全有机器人组成,严重威胁着世界的安全,特种部队派遣 Jax和Sonya对Tekunin进行清剿。在这次行动中,Jax又犯了自己鲁莽的老毛病,孤军深入敌人巢穴,在清剿中不慎被Tekunin成员俘虏。出于对Jax机械手臂的好奇,Sektor对Jax身体内的生物电子设备进行了研究,在这一过程中,Jax身体的电子设备向外界发送了报警信号。在接收到这一信号后,Sonya惊恐万分,她隐隐的感觉到Jax在行动中一定是遇到了苦难,并有可能已经身亡,她立即带领队友出发对Jax实施救援。最终,在 Taven和Sonya的共同努力下,Jax摆脱了险境。在末日战场的末尾,Jax加入了正义盟军,与战友们一起为抢夺Blaze体内的神之力量而与邪恶盟军展开了决斗,最终,Jax于战斗中丧命。结束了自己在老MK中的故事。 在 MK9中,Jax的故事有了许多微妙的变化,其中之一就是Jax于MK1中被捕。故事设定里,Jax和Sonya一同因追捕Kano而误入了举办MK大赛的小岛,二人中,Jax被Shang Tsung的手下所捕,关入大牢。Shang Tsung以Jax生命安全为诱饵,强迫Sonya参加MK大赛,利用Sonya来对抗参加MK大赛的地球勇士。面对敌人的胁迫,Sonya不屈不挠,他努力寻找Jax下落,最终在一处隐秘的监狱内发现了被囚禁的Jax。在Sonya努力击败了看守者,突破阻挠,将 Jax成功救出。在MK1末尾Liu Kang顺利击败Goro和Shang Tsung,获得了大赛冠军,Sonya和Jax也就此摆脱了敌人纠缠,成功脱离危险,不过,同样逃走的还有Kano。为了纪念Liu Kang拯救世界的壮举,少林举办了一场庆功大会,Jax和Sonya一同出席。就在大会结束,大家意犹未尽之时,Shang Tsung带领大批Tarkatan人突袭了少林,由于寡不敌众,少林被毁于一旦。Jax在战斗中虽然拼劲全力,可还是被Tarkatan战士所淹没,战斗中被打倒并失去知觉。在醒来之后,他不幸的发现Sonya已经被Shang Tsung一伙掳走,带回了Outworld。Shang Tsung这样做是要想地球挑衅,并通知对手在Outworld将举办一场新的MK大赛,要求地球勇士们参加。由于大赛关乎着地球的安危,Raiden只得带着勇士们参加,Jax积极做出了响应,他不仅关心地球,也关心着Sonya。来到Outworld后,Jax犯了易冲动的老毛病,他先是冒失的闯入了敌人根据地引发了战斗,后是因为脾气暴躁而与Cage产生了不必要的冲突。不过,最终Jax还是顺利的从Sheeva手下救出了Sonya。Jax 依靠武力击败Sheeva救出Sonya之后,奇怪地发现自己的雷达上接收到了2个电子信号(来源于Cyrax和Sektor),对于不存在科技的 Outworld而言,这太失常了。为了一探究竟,Raiden人员分头行动,分两组分别追踪两个神秘信号,Sonya和Jax被分定为一组,追踪其中一个信号。在探寻过程中,Jax无意间惊扰了正在休养之中的Ermac,后者因此显得十分恼怒,而Jax知道 Ermac其实是Shao Kahn创造的供他驱使的灵魂战士,于是便又犯了冲动的老毛病,不假思索的就要像Eramc发动武力袭击。他的这次行动过于低估了Eramc的实力,后者利用超能力很快便将Jax支付,并继续发力,硬生生的将Jax的双臂连根扒断。剧痛之下Jax很快失去知觉,Sonya急忙冲上前替Jax止血。慌乱之间,二人已经失去了抵抗能力。幸亏此时得到了光阳的帮助,他成功击退了Ermac帮助二人避开了一场危难。由于Jax伤势过重,Sonya与Jax不得不提前结束了MK2之旅,提前通过光阳指示的传送门返回了地球,Raiden恍然间失去了两个帮手。针对Jax手臂伤势的手术随即展开,最终,特种部队将生物电子科技创造的机械手臂安装在了Jax身体之上,顶替了被Ermac摧毁的人体手臂。这一设定与老MK有很大的出入。手臂接植完成后,得益于现代医疗的高水平,Jax很快便获得了康复。故事推移到MK3,Shao Kahn复活了女王Sindel并试图带领部队直接入侵地球。Jax加入了Raiden的团队,一同保卫地球的安危。剧情中,精通电子技术的Jax为已经被Lin Kuei强制机械化的光阳实施了手术,帮助后者去除了控制思维和肢体行动的电脑芯片,令光阳恢复了本有的意识。在其后的剧情中,受到Shao Kahn黑魔法强化过的Sindel袭击了正义勇士们的秘密基地,面对Sindel,Jax奋起反抗,可不幸的是,二人实力悬殊太大,Jax最终丧命于Sindel手下,新MK9中他的故事也就此告一段落。虽然游戏里他被称为Jax,但是Jax并不是他的本名,其本本名为Jackson Briggs,是非洲裔美国人。玩家对于他最津津乐道的无疑就是他那身结实的肌肉以及铁臂。
Ajax怎么实现文件批量上传与下载
这次给大家带来Ajax怎么实现文件批量上传与下载,Ajax实现文件批量上传与下载的注意事项有哪些,下面就是实战案例,一起来看一下。今天做了文件的上传下载,小小总结一下,基本的web项目建立及SpringMVC框架搭建此处不详细写出来了。上传form:<form id="uploadfiles" enctype="multipart/form-data"> <input type="file" multiple="multiple" id="file_upload" name="file_upload" /> <input type="button" value="上传" onclick="upload()" /></form>上传Ajax:<script type="text/javascript">/* * 上传文件 */function upload(){ var formData = new FormData($( "#uploadfiles" )[0]); $.ajax({ type: "post", url: "./path/upload", dataType: "json", data: formData, /** *必须false才会自动加上正确的Content-Type */ contentType : false, /** * 必须false才会避开jQuery对 formdata 的默认处理 * XMLHttpRequest会对 formdata 进行正确的处理 */ processData : false, success: function(data){//从后端返回数据进行处理 if(data){ alert("上传成功!"); }else{ alert("上传失败!"); } }, error: function(err) {//提交出错 $("#msg").html(JSON.stringify(err));//打出响应信息 alert("服务器无响应"); } });}</script>spring.xml配置加上:<!-- 配置文件上传 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!-- 默认编码 --> <property name="defaultEncoding" value="utf-8" /> <!-- 文件大小最大值 --> <property name="maxUploadSize" value="10485760000" /> <!-- 内存中的最大值 --> <property name="maxInMemorySize" value="40960" /> </bean>controller:/* * 上传多个文件 */ @RequestMapping(value = "/upload", produces = "application/json;charset=UTF-8") public @ResponseBody boolean uploadFiles(@RequestParam("file_upload") MultipartFile [] files) { boolean result = false; String realPath; for(int i=0;i<files.length;i++){ if (!files[i].isEmpty()) { String uniqueName=files[i].getOriginalFilename();//得到文件名 realPath="E:"+File.separator+uniqueName;//文件上传的路径这里为E盘 files[i].transferTo(new File(realPath)); // 转存文件 result = true; } catch (Exception e) { e.printStackTrace(); } } } return result; }下载的jsp页面代码根据需求不同自己设计,这里给出controller代码:/* * 下载多个文件 */ @RequestMapping(value = "/download") public void downloadFiles(HttpServletResponse response) { String str= request.getParameter("rows");//下载文件信息,包括文件名、存储路径等 JSONArray path=(JSONArray) JSONArray.parse(request.getParameter("rows")); Path paths[]=new Path[path.size()]; paths = JSONArray.parseArray(str, Path.class).toArray(paths); String uri = "d:"+ File.separator + "mldn.zip";//临时文件存储路径 File zipFile = new File(uri) ; // 定义压缩文件名称 ZipOutputStream zipOut = null;// 声明压缩流对象 InputStream input = null; //将要压缩的文件加入到压缩输出流中 try { zipOut = new ZipOutputStream(new FileOutputStream(zipFile)); } catch (FileNotFoundException e) { e.printStackTrace(); } for(int i = 0;i<paths.length;i++){ File file = new File(paths[i].getUri()+File.separator+paths[i].getFilename()); try { input = new FileInputStream(file) ;// 定义文件的输入流 zipOut.putNextEntry(new ZipEntry(file.getName())) ; // 设置ZipEntry对象 } catch (Exception e) { e.printStackTrace(); } } //将文件写入到压缩文件中 int temp = 0 ; try { while((temp=input.read())!=-1){ // 读取内容 zipOut.write(temp) ; // 写到压缩文件中 } } catch (IOException e) { e.printStackTrace(); }finally{ try { input.close() ; zipOut.close() ; } catch (IOException e) { e.printStackTrace(); } } try { // 以流的形式下载文件。 BufferedInputStream fis = new BufferedInputStream(new FileInputStream(zipFile)); byte[] buffer = new byte[fis.available()]; fis.read(buffer); fis.close(); // 清空response response.reset(); OutputStream toClient = new BufferedOutputStream(response.getOutputStream()); response.setContentType("application/x-msdownload;"); response.setHeader("Content-Disposition", "attachment;filename=" + zipFile.getName()); toClient.write(buffer); toClient.flush(); toClient.close(); zipFile.delete(); //将生成的服务器端文件删除 } catch (IOException ex) { ex.printStackTrace(); } }将多个文件打成一个压缩包下载,然后将生成的临时压缩文件删除。下载页面如果用Ajax提交请求的话要注意:ajax函数的返回类型只有xml、text、json、html等类型,没有“流”类型,所以我们要实现ajax下载,不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form,用这个form提交参数,并返回“流”类型的数据。例子:function download(){ var form=$("<form>");//定义一个form表单 form.attr("style","display:none"); form.attr("target",""); form.attr("method","post"); form.attr("action","./path/download");//请求url var input1=$("<input>"); input1.attr("type","hidden"); input1.attr("name","rows");//设置属性的名字 input1.attr("value",“test”);//设置属性的值 $("body").append(form);//将表单放置在web中 form.append(input1); form.submit();//表单提交 }相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!推荐阅读:实现无刷新下拉联动的Ajax+Servlet(附代码)怎样用Ajax异步检查用户名有无重复
如何用jaxb xsd 生成java类
#0. 准备要转换的xml文件,在Project视界中,右击这个xml文件,在弹出的菜单上选择“Generate XSD schema from XML File...”, 按默认设置生成xsd文件。将xsd 文件移至#1配置段的configuration/sources/source指定的路径下.
如何用ajax返回的页面到某个frame显示?
servlet只能返回请求的那个页面你可以在数据返回到lefFrame后在转到mainFrame进行处理本身iframe就可以做局部刷新你这样做就没必要ajax了
CXF配置中 jaxws:endpoint 和 jaxrs:server的区别
endpoint是java提供的方法 jaxws是cxf提供的 访问wsdl地址设置不同 endpoint可以直接设 jaxws这要根据你的项目 及cxf.xml决定另外 endpoint不推荐用 具体的话估计是wsdl一多 地址不好规范 ,但测试很方便 随便设地址
flex相对ajax的显著优势是什么?
FLEX在浏览器上的应用前景一般,尽管新版本编程已经非常方便而且性能上有优化,支持多种后台技术,但是一般不会有人去做整站的FLEX开发,这个局限性跟FLASH平台有一定关系,前景看起来拼不过HTML5。但是FLEX不只是包含浏览器应用,还包含桌面和移动应用,在桌面应用上FLEX中的AIR的编程跟FLEX WEB应用编程几乎是一模一样的,编程、设置、发布流程非常方便快捷,性能也不错,已经有一些大公司在开发应用了(例如WEBQQ桌面版和新浪微博的桌面版),另外移动开发最新版本已经支持黑莓、ANDROID和IOS了,在桌面和移动领域无疑是有很大潜力的。
AJAX调用WebService错误!
请把代码拷贝出来,好么?
求助牛人!怎样阻止form的转向action的页面(用到Ajax)。
<input type="image" id="i_signin" onclick="return checkSigninAjax()" class="signbtn" src="img/login_submit_btn.bmp"/>或者加在(个人建议最好加在form上面,这样的话,即使是用户直接按回车也可以执行AJAX)<form id="f_myForm" name="myForm" action="#" method="post" onsubmit="return checkSigninAjax()">然后修改JS的如下if(bFlag==1){ loation="正确时间转向的地址" return false;//注意这里也要返回false }else{ return false;}
form 表单中action 与method与ajax中open(method url true)弄迷糊了,各有什么作用?
你晕乎的是form的action属性&form的method属性&ajax的open的true这三个晕乎是吗?首先最基础的,学web最基础的html中的form表单这个先给你讲一下。form的action和method这连个属性是form表单必不可缺少的,也是最重要的。action的属性值是一个url,它指定了你的表单当单击submit按钮的时候提交到哪一个后台的控制器,比如哪一个servlet啊哪一个struts的action啊等等。当然这个action属性一般在某些应用里面呢会通过js来动态修改,这个再说。所以,action即动作嘛,有且只有一个用处,即单击submit后把请求连同参数提交到哪个后台的控制器,由你说了算。再就是method,method中文意思就是方法。http协议的请求方法有很多,比如get post delete head options put等,其中最常用的是get和post。你的请求一些情况下特别是表单的请求一般都带参数对不对,比如username等于张三,password等于123。如果指定使用get,那么这些参数就会在请求发送的时候,那么这些参数就会被url编码后被连缀在浏览器地址栏的url后面,所以,get的特点,第一,不安全,第二,容量有限毕竟url长度是有限的。post呢,相对安全,且长度比较长。所以,method参数就指定发送请求到服务器的方式方法,一般就是get和post。然后,说一下同步和异步这个东西,先独立于你的问题,先弄明白这两个概念的含义。同步请求就是需要等到服务器的响应之后,前台才能继续原来的工作。比如前台发了一个请求给服务器,然后这时候前台的任何工作就冻结了,等着吧。此时,服务器在繁忙的处理,处理完了把结果返回给前台,前台继续执行。这样前台必须等待后台的处理结果,如果后台处理太慢那么前台就一直等着,等到了结果才能继续,此乃同步。ajax的特色就在一异步,前台发了请求给后台,然后前台该干嘛干嘛,由单独的线程来监测后台的响应的返回。后台处理完了,返回前台,前台通过单独的线程来接受这个响应并处理,而且前台本身该做么做么,不需要等待服务器的响应和网络的延迟。此乃异步。表单form的请求无论你的action设置的是神马,method是神马,都是同步请求,即请求发送到服务器,服务器响应一会,前台等着结果再做处理。既然这种方式挺好的, 为么还需要异步?现在的互联网应用今非昔比,是富互联网应用时代,异步可以为我们带来更流畅的感觉更丰富的体验,好吧,跑题了,说你的问题。open(method url true)这个东西,首先这是js的原生的ajax(之所以是原生,是因为后面你学习前台框架比如jquery啊prototype啊会给你封装好ajax方便调用)代码,会发送一个ajax请求到后台。第一个参数method还用说吗,常用的非get就是post,特别要注意的是如果是get那么最后的send(x)方法也是要调用并且传递参数为null,如果是post那么在send这里传递参数即可。又跑题了。url即和上面的action一样的含义。看到了这里,我想你差不多应该明白了,form的那两个属性你先弄明白什么意思,然后对应到open的前两个参数,好理解了吧。最后就是第三个参数,如果是true那么代表异步,如果是false那么代表同步。虽然ajax的特点在于异步,但是同步也是经常使用的。还有么问题么?请追问。
使用ajax提交form表单form表单的action属性怎么设置
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="../script/jquery-1.10.2.js"></script></head><script type="text/javascript">$(function(){var check = 1;$("#myForm").submit(function(e){//取消默认提交事件//e.preventDefault();if(check == 1){console.log("验证通过,提交数据");$(this).ajaxSubmit({type: "post", // 提交方式 get/posturl: "/servlet/query", // 需要提交的 urldata: {"attr1": "白日依山尽","attr2": "宝塔镇河妖"},success: function(data) { // data 保存提交后返回的数据,一般为 json 数据// 此处可对 data 作相关处理alert("提交成功!");}});$(this).resetForm(); // 提交后重置表单}return false; // 阻止表单自动提交事件});});</script><body><form action="/servlet/query" method="post" id="myForm"><input type="text" name="userName" id="userName"/><input type="submit" id="btnSubmit" value="提交"/></form></body></html>试下用这个可否解决你的问题,另外jquery-form.js是可用实现form提交回调的;
用form自带属性action提交怎样用ajax提交
现在没有的吧
使用ajax提交form表单form表单的action属性怎么设置
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="../script/jquery-1.10.2.js"></script></head><script type="text/javascript">$(function(){var check = 1;$("#myForm").submit(function(e){//取消默认提交事件//e.preventDefault();if(check == 1){console.log("验证通过,提交数据");$(this).ajaxSubmit({type: "post", // 提交方式 get/posturl: "/servlet/query", // 需要提交的 urldata: {"attr1": "白日依山尽","attr2": "宝塔镇河妖"},success: function(data) { // data 保存提交后返回的数据,一般为 json 数据// 此处可对 data 作相关处理alert("提交成功!");}});$(this).resetForm(); // 提交后重置表单}return false; // 阻止表单自动提交事件});});</script><body><form action="/servlet/query" method="post" id="myForm"><input type="text" name="userName" id="userName"/><input type="submit" id="btnSubmit" value="提交"/></form></body></html>试下用这个可否解决你的问题,另外jquery-form.js是可用实现form提交回调的;
使用layer弹出框怎么使用ajax
使用layer弹出框使用ajax方法:1.你可以自定义按钮,写在你的页面里面2.使用 layer 的按钮的话,按钮的回调函数的参数中有两个参数,一个是弹层的对象,一个是弹层的 index,你可以使用这个弹层的对象读取弹层中的数据,比如 layero.find("xxx").val()
如何解决 Ajax 跨域请求不到的问题
找到一种解决方式现在也知道了怎样来解决跨域问题,余下的就是实现的细节了。实现的过程中错误还是避免不了的。由于不了解json和jsonp两种格式的区别,也犯了错误,google了好久才解决。首先来看看在页面中如何使用jQuery的ajax解决跨域问题的简单版:$(document).ready(function(){ var url="http://localhost:8080/WorkGroupManagment/open/getGroupById" +"?id=1&callback=?"; $.ajax({ url:url, dataType:"jsonp", processData: false, type:"get", success:function(data){ alert(data.name); }, error:function(XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); }}); });这样写是完全没有问题的,起先error的处理函数中仅仅是alert(“error”),为了进一步弄清楚是什么原因造成了错误,故将处理函数变 为上面的实现方式。最后一行alert使用为;parsererror。百思不得其解,继续google,最终还是在万能的stackoverflow找 到了答案,链接在这里。原因是jsonp的格式与json格式有着细微的差别,所以在server端的代码上稍稍有所不同。比较一下json与jsonp格式的区别:json格式:{ "message":"获取成功", "state":"1", "result":{"name":"工作组1","id":1,"description":"11"}}jsonp格式:callback({ "message":"获取成功", "state":"1", "result":{"name":"工作组1","id":1,"description":"11"}})看出来区别了吧,在url中callback传到后台的参数是神马callback就是神马,jsonp比json外面有多了一层,callback()。这样就知道怎么处理它了。于是修改后台代码。后台java代码最终如下:@RequestMapping(value = "/getGroupById") public String getGroupById(@RequestParam("id") Long id, HttpServletRequest request, HttpServletResponse response) throws IOException { String callback = request.getParameter("callback"); ReturnObject result = null; Group group = null; try { group = groupService.getGroupById(id); result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS); } catch (BusinessException e) { e.printStackTrace(); result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED); } String json = JsonConverter.bean2Json(result); response.setContentType("text/html"); response.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); out.print(callback + "(" + json + ")"); return null; }注意这里需要先将查询结果转换我json格式,然后用参数callback在json外面再套一层,就变成了jsonp。指定数据类型为jsonp的ajax就可以做进一步处理了。虽然这样解决了跨域问题,还是回顾下造成parsererror的原因。原因在于盲目的把json格式的数据当做jsonp格式的数据让ajax处理,造成了这个错误,此时server端代码是这样的:@RequestMapping(value = "/getGroupById") @ResponseBody public ReturnObject getGroupById(@RequestParam("id") Long id, HttpServletRequest request, HttpServletResponse response){ String callback = request.getParameter("callback"); ReturnObject result = null; Group group = null; try { group = groupService.getGroupById(id); result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS); } catch (BusinessException e) { e.printStackTrace(); result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED); } return result; }至此解决ajax跨域问题的第一种方式就告一段落。
jQuery ajax 的传值问题。求解
ajax成功后,在 each里的$("<img/>"),是建立一个新的img,紧接着下面的 $("img")是啥意思?取刚建立的img吗?这么写是取不到的。那是取所有的图片?写到each里重复的绑定所有img,也有点诡异。把id传递其实可以建立一个全局变量,例如在jquery之外,也就是脚本刚开始( document.ready 之外 ),var id_sent, 然后每次传递id的时候,就把id写到 id_sent里,然后取值即可,因为全局变量一直都好使。
关于jQuery ajax页面内容的改变在页内完成,不需要页面切换
ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。 最简单的情况下,$.ajax() 可以不带任何参数直接使用。 注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。 语法 jQuery.ajax([settings]) 参数 描述 settings 可选。用于配置 Ajax 请求的键值对集合。 可以通过 $.ajaxSetup() 设置任何选项的默认值。 参数 options 类型:Object 可选。AJAX 请求设置。所有选项都是可选的。 async 类型:Boolean 默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。 注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。 beforeSend(XHR) 类型:Function 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。 XMLHttpRequest 对象是唯一的参数。 这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。 cache 类型:Boolean 默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。 jQuery 1.2 新功能。 complete(XHR, TS) 类型:Function 请求完成后回调函数 (请求成功或失败之后均调用)。 参数: XMLHttpRequest 对象和一个描述请求类型的字符串。 这是一个 Ajax 事件。 contentType 类型:String 默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。 默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。 context 类型:Object 这个对象用于设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对象(如果不设定这个参数,那么 this 就指向调用本次 AJAX 请求时传递的 options 参数)。比如指定一个 DOM 元素作为 context 参数,这样就设置了 success 回调函数的上下文为这个 DOM 元素。 就像这样: $.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done"); }}); data 类型:String 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。 dataFilter 类型:Function 给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数:data 是 Ajax 返回的原始数据,type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。 dataType 类型:String 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值: "xml": 返回 XML 文档,可用 jQuery 处理。 "html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载) "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。 "text": 返回纯文本字符串 error 类型:Function 默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。 有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。 如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 "timeout", "error", "notmodified" 和 "parsererror"。 这是一个 Ajax 事件。 global 类型:Boolean 是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。 ifModified 类型:Boolean 仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中,它也会检查服务器指定的 "etag" 来确定数据没有被修改过。 jsonp 类型:String 在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分,比如 {jsonp:"onJsonPLoad"} 会导致将 "onJsonPLoad=?" 传给服务器。 jsonpCallback 类型:String 为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候,指定这个回调函数名。 password 类型:String 用于响应 HTTP 访问认证请求的密码 processData 类型:Boolean 默认值: true。默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。 scriptCharset 类型:String 只有当请求时 dataType 为 "jsonp" 或 "script",并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。 success 类型:Function 请求成功后的回调函数。 参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。 这是一个 Ajax 事件。 traditional 类型:Boolean 如果你想要用传统的方式来序列化数据,那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。 timeout 类型:Number 设置请求超时时间(毫秒)。此设置将覆盖全局设置。 type 类型:String 默认值: "GET")。请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。 url 类型:String 默认值: 当前页地址。发送请求的地址。 username 类型:String 用于响应 HTTP 访问认证请求的用户名。 xhr 类型:Function 需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。 回调函数 如果要处理 $.ajax() 得到的数据,则需要使用回调函数:beforeSend、error、dataFilter、success、complete。 beforeSend 在发送请求之前调用,并且传入一个 XMLHttpRequest 作为参数。 error 在请求出错时调用。传入 XMLHttpRequest 对象,描述错误类型的字符串以及一个异常对象(如果有的话) dataFilter 在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据(可能是处理过的)传递给 success 回调函数。 success 当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。 complete 当请求完成之后调用这个函数,无论成功或失败。传入 XMLHttpRequest 对象,以及一个包含成功或错误代码的字符串。
jquery ajax ie接收不到返回值,chrome可以正常运行,还一个奇怪的情况。
那就继续追踪你注释掉的include文件,看看那里面到底是那块出的问题。感觉重点可能是你的返回值result,可能有什么问题
MUI 的Ajax跨域问题怎么解决
由 于前少写前端代码(哈哈合格程序员啊)近项目用json作系统间交互手段自伴随着众ajax请求随要解决 ajax跨域问题本篇讲述白遇跨域知道跨域问题知道跨域问题知道何解决再解决跨域问题找两种解决ajax 跨域问题全程 知跨域问题 起 复用减少重复发单独发用户权限管理系统共其系统获取认证与授权信息暂且称A系统;调用A系统B例B系统 用ajax调用A系统系统接口(数据格式json)特别困惑A系统访问相应url返json数据B系统使用 ajax请求同url则点反应都没像都没发反反复复改改久都没能解决于求救同事提醒能ajax跨域问 题于问题做跨域问题解决 知跨域知何解决 知道问题确切原剩找解决问题google久再同事指点知道jQueryajaxjsonp属性用解决跨域问题 找种解决式 现知道解决跨域问题余实现细节实现程错误避免由于解jsonjsonp两种格式区别犯错误google久才解决 首先看看页面何使用jQueryajax解决跨域问题简单版: 复制代码 $(document).ready(function(){ var url="中国//localhost:8080/WorkGroupManagment/open/getGroupById" +"?id=1&callback=?"; $.ajax({ url:url, dataType:"jsonp", processData: false, type:"get", success:function(data){ alert(data.name); }, error:function(XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); }}); }); 复制代码 写完全没问题起先error处理函数仅仅alert(error)进步弄清楚原造错误故处理函数变 面实现式行alert使用;parsererror百思其解继续google终万能stackoverflow找 答案链接原jsonp格式与json格式着细微差别所server端代码稍稍所同 比较json与jsonp格式区别: json格式: { "message":"获取功", "state":"1", "result":{"name":"工作组1","id":1,"description":"11"} } jsonp格式: callback({ "message":"获取功", "state":"1", "result":{"name":"工作组1","id":1,"description":"11"} }) 看区别吧urlcallback传台参数神马callback神马jsonp比json外面层callback()知道处理于修改台代码 台java代码终: 复制代码 @RequestMapping(value = "/getGroupById") public String getGroupById(@RequestParam("id") Long id, HttpServletRequest request, HttpServletResponse response) throws IOException { String callback = request.getParameter("callback"); ReturnObject result = null; Group group = null; try { group = groupService.getGroupById(id); result = new ReturnObject(group, "获取功", Constants.RESULT_SUCCESS); } catch (BusinessException e) { e.printStackTrace(); result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED); } String json = JsonConverter.bean2Json(result); response.setContentType("text/html"); response.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); out.print(callback + "(" + json + ")"); return null; } 复制代码 注意需要先查询结转换我json格式用参数callbackjson外面再套层变jsonp指定数据类型jsonpajax做进步处理 虽解决跨域问题顾造parsererror原原于盲目json格式数据做jsonp格式数据让ajax处理造错误server端代码: 复制代码 @RequestMapping(value = "/getGroupById") @ResponseBody public ReturnObject getGroupById(@RequestParam("id") Long id, HttpServletRequest request, HttpServletResponse response){ String callback = request.getParameter("callback"); ReturnObject result = null; Group group = null; try { group = groupService.getGroupById(id); result = new ReturnObject(group, "获取功", Constants.RESULT_SUCCESS); } catch (BusinessException e) { e.printStackTrace(); result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED); } return result; } 复制代码 至解决ajax跨域问题第种式告段落 追加种解决式 追求永止境google程意发现专门用解决跨域问题jQuery插件-jquery-jsonp 第种式基础使用jsonp插件比较简单server端代码需任何改 看何使用jquery-jsonp插件解决跨域问题吧 复制代码 var url="中国//localhost:8080/WorkGroupManagment/open/getGroupById" +"?id=1&callback=?"; $.jsonp({ "url": url, "success": function(data) { $("#current-group").text("前工作组:"+data.result.name); }, "error": function(d,msg) { alert("Could not find user "+msg); } })
jQuery ajax,一直调用error方法。
跨域了,亲
jquery中ajax使用error调试错误的方法
本文实例讲述了jquery中ajax使用error调试错误的方法。分享给大家供大家参考。具体分析如下:JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息。jquery中ajax的常用用法类似于:$(document).ready(function(){jQuery("#clearCac").click(function(){jQuery.ajax({url:url,type:"post",data:{id:"0"},dataType:"json",success:function(msg){alert(msg);},error:function(XMLHttpRequest,textStatus,errorThrown){alert(XMLHttpRequest.status);alert(XMLHttpRequest.readyState);alert(textStatus);},complete:function(XMLHttpRequest,textStatus){this;//调用本次AJAX请求时传递的options参数}});});});当通过ajax异步调用成功时,会调用success函数。success函数语法为://请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态function(data,textStatus){//datacouldbexmlDoc,jsonObj,html,text,etc...this;//theoptionsforthisajaxrequest}当通过ajax异步调用出错时,会调用error函数。error函数语法为://(默认:自动判断(xml或html))请求失败时调用时间。//参数有以下三个:XMLHttpRequest对象、错误信息、(可选)捕获的错误对象。//如果发生了错误,错误信息(第二个参数)除了得到null之外,//还可能是"timeout","error","notmodified"和"parsererror"。//textStatus:"timeout","error","notmodified"和"parsererror"。error:function(XMLHttpRequest,textStatus,errorThrown){}error事件返回的第一个参数XMLHttpRequest:XMLHttpRequest.readyState:状态码的意思0-(未初始化)还没有调用send()方法1-(载入)已调用send()方法,正在发送请求2-(载入完成)send()方法执行完成,已经接收到全部响应内容3-(交互)正在解析响应内容4-(完成)响应内容解析完成,可以在客户端调用了发送error可能有下面两张引起的,或者其他程序问题,需要我们认真仔细。1、data:"{}",data为空也一定要传"{}";不然返回的是xml格式的。并提示parsererror.2、parsererror的异常和Header类型也有关系。及编码header("Content-type:text/html;charset=utf8");希望本文所述对大家的jQuery程序设计有所帮助。
jq的ajax请求写法
1、定义和用法ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。最简单的情况下,$.ajax() 可以不带任何参数直接使用。2、语法jQuery.ajax([settings])setting参数:options类型:Object可选。AJAX 请求设置。所有选项都是可选的。async类型:Boolean默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。beforeSend(XHR)类型:Function发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。cache类型:Boolean默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。jQuery 1.2 新功能。complete(XHR, TS)类型:Function请求完成后回调函数 (请求成功或失败之后均调用)。参数: XMLHttpRequest 对象和一个描述请求类型的字符串。这是一个 Ajax 事件。contentType类型:String默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。context类型:Object这个对象用于设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对象(如果不设定这个参数,那么 this 就指向调用本次 AJAX 请求时传递的 options 参数)。比如指定一个 DOM 元素作为 context 参数,这样就设置了 success 回调函数的上下文为这个 DOM 元素。就像这样:$.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done");}});data类型:String发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。dataFilter类型:Function给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数:data 是 Ajax 返回的原始数据,type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。dataType类型:String预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:"xml": 返回 XML 文档,可用 jQuery 处理。"html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)"json": 返回 JSON 数据 。"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。"text": 返回纯文本字符串error类型:Function默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 "timeout", "error", "notmodified" 和 "parsererror"。这是一个 Ajax 事件。global类型:Boolean是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。ifModified类型:Boolean仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中,它也会检查服务器指定的 "etag" 来确定数据没有被修改过。jsonp类型:String在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分,比如 {jsonp:"onJsonPLoad"} 会导致将 "onJsonPLoad=?" 传给服务器。jsonpCallback类型:String为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候,指定这个回调函数名。password类型:String用于响应 HTTP 访问认证请求的密码processData类型:Boolean默认值: true。默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。scriptCharset类型:String只有当请求时 dataType 为 "jsonp" 或 "script",并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。success类型:Function请求成功后的回调函数。参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。这是一个 Ajax 事件。traditional类型:Boolean如果你想要用传统的方式来序列化数据,那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。timeout类型:Number设置请求超时时间(毫秒)。此设置将覆盖全局设置。type类型:String默认值: "GET")。请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。url类型:String默认值: 当前页地址。发送请求的地址。username类型:String用于响应 HTTP 访问认证请求的用户名。xhr类型:Function需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。回调函数如果要处理 $.ajax() 得到的数据,则需要使用回调函数:beforeSend、error、dataFilter、success、complete。beforeSend在发送请求之前调用,并且传入一个 XMLHttpRequest 作为参数。error在请求出错时调用。传入 XMLHttpRequest 对象,描述错误类型的字符串以及一个异常对象(如果有的话)dataFilter在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据(可能是处理过的)传递给 success 回调函数。success当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。complete当请求完成之后调用这个函数,无论成功或失败。传入 XMLHttpRequest 对象,以及一个包含成功或错误代码的字符串。
jQuery.ajax()的参数
options(可选)ObjectAJAX 请求设置。所有选项都是可选的。 asyncBoolean(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。beforeSend(XHR)Function发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回false可以取消本次ajax请求。function (XMLHttpRequest) { this; // 调用本次AJAX请求时传递的options参数}cacheBoolean(默认: true,dataType为script和jsonp时默认为false) jQuery 1.2 新功能,设置为 false 将不缓存此页面。complete(XHR, TS)Function请求完成后回调函数 (请求成功或失败之后均调用)。参数: XMLHttpRequest 对象和一个描述成功请求类型的字符串。 Ajax 事件。function (XMLHttpRequest, textStatus) { this; // 调用本次AJAX请求时传递的options参数}contentTypeString(默认: application/x-www-form-urlencoded) 发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个content-type给 $.ajax() 那么他必定会发送给服务器(即使没有数据要发送)contextObject这个对象用于设置Ajax相关回调函数的上下文。也就是说,让回调函数内this指向这个对象(如果不设定这个参数,那么this就指向调用本次AJAX请求时传递的options参数)。比如指定一个DOM元素作为context参数,这样就设置了success回调函数的上下文为这个DOM元素。就像这样:$.ajax({ url: test.html, context: document.body, success: function(){ $(this).addClass(done);}});dataObject,String发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:[bar1, bar2]} 转换为 "&foo=bar1&foo=bar2"。dataFilterFunction给Ajax返回的原始数据的进行预处理的函数。提供data和type两个参数:data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。function (data, type) { // 对Ajax返回的原始数据进行预处理 return data // 返回处理后的数据}dataTypeString预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如XML MIME类型就被识别为XML。在1.4中,JSON就会生成一个JavaScript对象,而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:xml: 返回 XML 文档,可用 jQuery 处理。html: 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。script: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了cache参数。"""注意:"""在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)json: 返回 JSON 数据 。jsonp: JSONP 格式。使用 JSONP 形式调用函数时,如 myurl?callback=? jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。text: 返回纯文本字符串errorFunction(默认: 自动判断 (xml 或 html)) 请求失败时调用此函数。有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。如果发生了错误,错误信息(第二个参数)除了得到null之外,还可能是timeout, error, notmodified 和 parsererror。Ajax 事件。function (XMLHttpRequest, textStatus, errorThrown) { // 通常 textStatus 和 errorThrown 之中 // 只有一个会包含信息 this; // 调用本次AJAX请求时传递的options参数}globalBoolean(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。ifModifiedBoolean(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。在jQuery 1.4中,他也会检查服务器指定的"etag"来确定数据没有被修改过。jsonpString在一个jsonp请求中重写回调函数的名字。这个值用来替代在callback=?这种GET或POST请求中URL参数里的callback部分,比如{jsonp:"onJsonPLoad"}会导致将onJsonPLoad=?传给服务器。jsonpCallbackString为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候,指定这个回调函数名。passwordString用于响应HTTP访问认证请求的密码processDataBoolean(默认: true) 默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 application/x-www-form-urlencoded。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。scriptCharsetString只有当请求时dataType为jsonp或script,并且type是GET才会用于强制修改charset。通常只在本地和远程的内容编码不同时使用。successFunction请求成功后的回调函数。参数:由服务器返回,并根据dataType参数进行处理后的数据;描述状态的字符串。 Ajax 事件。function (data, textStatus) { // data 可能是 xmlDoc, jsonObj, html, text, 等等... this; // 调用本次AJAX请求时传递的options参数}traditionalBoolean如果你想要用传统的方式来序列化数据,那么就设置为true。请参考工具分类下面的jQuery.param 方法。timeoutNumber设置请求超时时间(毫秒)。此设置将覆盖全局设置。typeString(默认: GET) 请求方式 (POST 或 GET), 默认为 GET。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。urlString(默认: 当前页地址) 发送请求的地址。usernameString用于响应HTTP访问认证请求的用户名xhrFunction需要返回一个XMLHttpRequest 对象。默认在IE下是ActiveXObject 而其他情况下是XMLHttpRequest 。用于重写或者提供一个增强的XMLHttpRequest 对象。这个参数在jQuery 1.3以前不可用。 描述:加载并执行一个 JS 文件。jQuery 代码:$.ajax({ type: GET, url: test.js, dataType: script});描述:保存数据到服务器,成功时显示信息。jQuery 代码:$.ajax({ type: POST, url: some.php, data: name=John&location=Boston, success: function(msg){ alert( Data Saved: + msg ); }});描述:装入一个 HTML 网页最新版本。jQuery 代码:$.ajax({ url: test.html, cache: false, success: function(html){ $(#results).append(html); }});描述:同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。jQuery 代码: var html = $.ajax({ url: some.php, async: false }).responseText;描述:发送 XML 数据至服务器。设置 processData 选项为 false,防止自动转换数据格式。jQuery 代码:var xmlDocument = [create xml document]; $.ajax({ url: page.php, processData: false, data: xmlDocument, success: handleResponse });jQuery post实例代码:$.post(test.php,{name:name,pwd:pwd},function(msg){alert(msg);})test.php 里面用$_POST[name] 和$_POST[pwd]接收参数.$.post第一个参数是url,{}这里里面的是参数名称和值之间用:非开,多个值用,分开,最后一个是返回的函数msg就是返回的结果。根据自己的需要返回不用的数据。$.get和post一样,php接收的话改成$_GET[name]和$_GET[pwd]
ajax能不能发送https请求获取服务器数据
最简单的情况下,$.ajax() 可以不带任何参数直接使用。注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。语法jQuery.ajax([settings])参数 描述settings 可选。用于配置 Ajax 请求的键值对集合。可以通过 $.ajaxSetup() 设置任何选项的默认值。参数options类型:Object可选。AJAX 请求设置。所有选项都是可选的。async类型:Boolean默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。beforeSend(XHR)类型:Function发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。cache类型:Boolean默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。jQuery 1.2 新功能。complete(XHR, TS)类型:Function请求完成后回调函数 (请求成功或失败之后均调用)。参数: XMLHttpRequest 对象和一个描述请求类型的字符串。这是一个 Ajax 事件。contentType类型:String默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。context类型:Object这个对象用于设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对象(如果不设定这个参数,那么 this 就指向调用本次 AJAX 请求时传递的 options 参数)。比如指定一个 DOM 元素作为 context 参数,这样就设置了 success 回调函数的上下文为这个 DOM 元素。就像这样:$.ajax({ url: "test.html", context: document.body, success: function(){$(this).addClass("done"); }});dataObject类型:String发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。dataFilter类型:Function给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数:data 是 Ajax 返回的原始数据,type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。dataType类型:String预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:u2022"xml": 返回 XML 文档,可用 jQuery 处理。u2022"html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。u2022"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)u2022"json": 返回 JSON 数据 。u2022"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。u2022"text": 返回纯文本字符串error类型:Function默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 "timeout", "error", "notmodified" 和 "parsererror"。这是一个 Ajax 事件。global
jQuery ajax success返回值类型与什么有关
$.ajax({type : function(jsonStr) {alert(jsonStr),dataType ;json",success : ".jsp”,url:http://www.baidu.com;}})这个回调函数中的参数 jsonStr是json格式的,请求后服务器端返回的数据会根据这个值解析后;,以执行回调函数,所以返回的数据必须是json的.cn/jquery/ajax_ajax,不然会出错
JQuery $.ajax 捕获异常信息
转自 : http://blog.csdn.net/wenle006/article/details/7022240 (默认: 自动判断 (xml 或 html)) 请求失败时调用时间。参数有以下三个:XMLHttpRequest 对象、错误信息、(可选)捕获的错误对象、XMLResponse对象。如果发生了错误,错误信息(第二个参数)除了得到null之外,还可能是"timeout", "error", "notmodified" 和 "parsererror"。 状态码 eg:python cgi+js: 前端调用python 已经print result了,但是前端并没有收到,依然pendding,一直是 Provisional headers are shown ,当结束进程时,前端返回200,此时会把之前的result打印出来并附带了cgi的头,如下:导致textStatus为parsererror 可以使用: chrome://net-internals/#events 查看问题
APICloud 社区api.ajax接口多个文件上传怎么传参
通过post请求上传,有两种方式,跟form表单通过file标签提交文件是一样的。1、一种是键值对的方式,也就是一个name对应一个file:api.ajax({ url: "http://host/upLoad", method: "post", report:true,//回调上传进度 data: { files: { file1: "/sdcard/a.png", file2: "/sdcard/b.png", file3: "/sdcard/c.png", } }}, function(ret, err) { if (ret) { console.log(JSON.stringify(ret)); } else { console.log(JSON.stringify(err)); }});2、另外一种是上传文件数组,这种方式你的服务器要配合做特殊的处理进行支持:api.ajax({ url: "http://host/upLoad", method: "post", report:true,//回调上传进度 data: { files: { images: ["/sdcard/a.png", "/sdcard/b.png", "/sdcard/c.png"] } }}, function(ret, err) { if (ret) { console.log(JSON.stringify(ret)); } else { console.log(JSON.stringify(err)); }});
Ajax请求中怎么用JS对参数进行urlencode编码呢?
在JS中有两个函数用来对字符串进行urlencode编码的,一个是:encodeURI();另一个是:encodeURIComponent();通常情况下,这两个函数都是可以达到目的的,它们的区别就是:encodeURI()函数不能对以下几个字符编码:":"、"/"、";" 和 "?"。所以可以根据你的实际情况进行选择,推荐使用encodeURIComponent()。 查看原帖>>
AjaxValidator验证页怎么写
你这个返回datatype : "json",应该改成"html"还有参数你传递的是对象。。$("#username").val()啊、、谢谢。。
跪求《I just played jax》歌词
Album:The Confessions TourMadonna-Lucky StarMadonna RitchieYou must be my lucky star"Cause you shine on me wherever you areI just think of you and I start to glowAnd I need your lightAnd baby you knowStarlight, starbright first star I see tonightStarlight, (starbright) make everything all rightStarlight, starbright first star I see tonightStarlight, (starbright) yeahStarlight, starbright, starlightYou must be my lucky star"Cause you make the darkness seem so farAnd when I"m lost you"ll be my guideI just turn around and you"re by my side Starlight, starbright first star I see tonightStarlight, (starbright) make everything all rightStarlight, starbright first star I see tonightStarlight, (starbright) yeah You may be my lucky starBut I"m the luckiest by farYou may be my lucky starBut I"m the luckiest by farYou may be my lucky starBut I"m the luckiest by farYou may be my lucky starBut I"m the luckiest by farStarlight, starbright first star I see tonightStarlight, (starbright) make everything all rightStarlight, starbright first star I see tonightStarlight, (starbright) yeahStarlight, starbright first star I see tonightStarlight, (starbright)make everything all rightStarlight, starbright first star I see tonightStarlight, (starbright) yeahDo you wanna hear some more? Every little thing that you say or doI"m hung upI"m hung up on youWaiting for your call baby night and dayI"m fed upI"m tired of waiting on you
Danzel - You Spin Me Round (Jaxn F Remix)的歌词大意是什么
Hey" oh" Hey" oh?You"re an intellect and nobody votes Politically correct it is not a joke We censor music then give children guns I"m seeing in Still frightened to death of Jerusalem Four letter decease still makes us run Can"t comprehend that you can die from love Can I start things over and change your mind? Can a single melody press rewind? Can I move your feet make your heart skip a beat? Can a simple tune flow through you? When the music feels like this When you loose control you"ve go to go with it Ten feet high flying above the sky Your problems don"t exist when the music feels like this No money left in Africa Starving to death in Bosnia We close our eyes and hide - a nation crys And in the west TV possessed and weight obsessed The media dissects" infects We think real life is reality TV Can I have your attention and press rewind? When the DJ spins will it change your mind? Can I move your feet make your heart skip a beat? Can a piece of me flow through you? When the music feels like this When you loose control you"ve go to go with it Ten feet high flying above the sky Your problems don"t exist when the music feels like this When the music feels like this DJ take control and grab a hold of me Spin that wheel and tell me how it feels I like the shape I"m in when the music feels like this Light speed Light speed Light speed Bringin" the beat back Stompin" the floor Dancin" like a booty never bounced before Popin" to the back beat up on the oneSmack jack freakin" now you"re overcome When the music feels like this When you loose control you"ve go to go with it Ten feet high flying above the sky Your problems don"t exist when the music feels like this When the music feels like this DJ take control and grab a hold me Spin that wheel and tell me how it feels I like the shape I"m in when the music feels like this Light speed Light speed Light speed When the music feels like thisLight speed Light speed Light speed When the music feels like this?嘿噢嘿噢?你是一个理智的和没有人的选票政治正确,这不是一个笑话我们审查的音乐然后给孩子的枪我看到的还是害怕死亡的耶路撒冷四个字母的死亡仍然让我们跑无法相信你因为爱而死我可以开始一件事,改变你的想法?可以单旋律倒带吗?我可以将你的脚使你的心跳?可以简单的旋律流过你的?当音乐这样的感觉当你失去控制,你去吧十英尺高的上空飞行你的问题不存在时,音乐就像这个没有钱离开非洲饿死在波斯尼亚我们关闭我们的眼睛和隐藏-一个国家crys而在西方电视具有和体重所困扰媒体的影响剖析我们认为,真正的生活是现实的电视我可以有你的注意和倒带吗?当DJ旋转它会改变你的想法?我可以将你的脚使你的心跳?可以一块我流过你的?当音乐这样的感觉当你失去控制,你去吧十英尺高的上空飞行你的问题不存在时,音乐就像这个当音乐这样的感觉DJ采取控制和抓住我旋转轮和我的感觉我喜欢我的音乐的时候觉得这个形状光速光速光速把“击退stompin的地板跳舞像战利品之前不会反弹波平”后面打上一个杰克正他妈的你现在克服当音乐这样的感觉当你失去控制,你去吧十英尺高的上空飞行你的问题不存在时,音乐就像这个当音乐这样的感觉DJ采取控制和一把抓住我旋转轮和我的感觉我喜欢我的音乐的时候觉得这个形状光速光速光速当音乐这样的感觉光速光速光速当音乐的感觉吗?
ajax返回的值怎么放进a标签的href里面
"<a href=">"+data[i].title+""></a>"
ajax怎么获取后台的数据?
ajax获取后台数据的方法很多!在此给你讲两种:第一种通过Ajax异步请求进行实现!具体方法包括:$.get() $.psot() $.AJax(),关于这三种方法的用法,请楼主参考http://www.w3school.com.cn/jquery/ajax_get.asp或者http://www.w3school.com.cn/jquery/ajax_post.asp或者http://www.w3school.com.cn/jquery/ajax_ajax.asp当然:这些资料都是W3C提供的,可能解决不了你的问题!如果你有兴趣,可以百度HI我!或者加我为QQ好友!我详细给你讲解一下!除了上述这些方法以外,你还可以用程序集来实现!你可以从网上下载一个名为:AjaxPro.2.dll的程序集!添加对其的引用就行了!关于这个程序集的用法,还请楼主认真学习!因为如果你学会了这种方法,想必$.get() $.post() $.Ajax()这些方法你都不想用了!因为这个程序集用起来的确很方便!具体用法请参考:http://www.cnblogs.com/IsNull-Soft/articles/2437550.html 如果有其他疑问,请致电:one_eight_nine_one_one_three_five_five_zero_eight_seven
请问Ajax如何获取回调函数的返回值?
你好!你的设计意图在引入ajax回调之后不可能实现了.按你的设计目的,我建议你这样改进: function Password_CallBack(response) { document.getElementById("hiddenPassword").value = response; //这里取消 return confirm("The password has been reset to " + response + " , do you want to send email?");//改为: if(confirm("The password has been reset to " + response + " , do you want to send email?")){//在这里再发起一次ajax请求,在server端实现发送email重置密码的通知.} }另一种解决方案是: public static string GetPassword()加一个bool类型的参数sendEmail,在server端直接实现发送email.在调用ajax请求GetPassword之前,先请用户 var sendEmail=confirm("The password has been reset to " + response + " , do you want to send email?");把confirm返回的结果作为参数传给GetPassword方法.最后 .一楼的解决方法看上去可行,但实际 运行时,A永远都是null.不会实现正确效果有问题请再联系我,
axios和ajax区别
1.区别axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。axios是ajax ajax不止axios。下面列出代码来对比一下:axios:axios({ url: "/getUsers", method: "get", responseType: "json", // 默认的 data: { //"a": 1, //"b": 2, } }).then(function (response) { console.log(response); console.log(response.data); }).catch(function (error) { console.log(error); })ajax:$.ajax({ url: "/getUsers", type: "get", dataType: "json", data: { //"a": 1, //"b": 2, }, success: function (response) { console.log(response); } })2.优缺点:ajax:本身是针对MVC的编程,不符合现在前端MVVM的浪潮基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务axios:从 node.js 创建 http 请求支持 Promise API客户端支持防止CSRF提供了一些并发请求的接口(重要,方便了很多的操作)
Ajax和API是什么?
AJAX : Asynchronous JavaScript and XML 异步JavaScript和XML技术API : Application Programming Interface应用程序接口
ajax用在哪些地方(求列举点实际应用的例子..)
哈,比如用户登录呀~点提交按钮提交留言呀~不需要页面缓存的地方~总之,需要提交的地方都可以玩异步提交
什么是ajax异步请求
在用户不知道的情况下发出的请求~
ajax 核心技术是什么?
核心是javascript调用XML的异步传输
ajax实现页面请求jsp数据,有大神能给写个例子么?
$.ajax({type:"POST",url:"${ctx}/stats/energyTrend!getElectricInfo.action",//请求地址data:{year:year,month:month},//传递参数json格式dataType:"json",//ajax返回类型还要html/text等success:function(data){//请求成功data为返回的数据}});
ajax怎样调用接口
"http://www.w3.org/TR/html4/loose.dtd"><</code>html><</code>head> <</code>meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <</code>title>Weibo</</code>title> <</code>script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></</code>script> <</code>script type="text/javascript"> $.ajax({ url: "https://api.weibo.com/2/users/show.json", type: "GET", dataType: "jsonp", data: { source:"appkey", uid: "自己微博的uid", count:"15" }, success: function(data) { alert(data.data.screen_name); alert(data.data.location); } }) </</code>script></</code>head><</code>body> <</code>div id="jsWeibo"></</code>div></</code>body></</code>html>
怎么用AJAX实现更新数据
// 使用jquery库// 客户端的脚本function ajaxsave(id){var url,data;url="server.asp";//这里是你的服务器文件data={action:"isread",id:id};$.post(url,data,function(result){if(result=="1"){document.getElementById("obj").value="已读";}else{document.getElementById("obj").value="未查看";}});}//========下面是server.asp页面代码=============dim actionaction=request.form("action")if action="isread" thencall DoRead()end ifsub DoRead()dim idid=request.form("id")// 这里添加你执行的代码if true then // 已读response.write("1")elseresponse.write("-1")end ifend sub// 客户端的result就在你server.asp的respose.write的内容
一个简单的Ajax例子?
/*****************JS************************/var xmlHttp = false; //定义一个变量用来存放XMLHttpRequest对象//检测用户名是否唯一的请求function createXmlHttpRequest(){ if(window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } if(!xmlHttp && typeof XMLHttpRequest != "undefined") { xmlHttp = new XMLHttpRequest(); }}/*=====================动态改变页面信息开始===================================*///动态改变页面function dynamicUpdate(){ createXmlHttpRequest(); var URL = "../ServerPage.aspx?task=reset"; xmlHttp.open("GET",URL,true); xmlHttp.onreadystatechange = dynamicUpdateInfo; xmlHttp.send(null);}//动态改变页面回调函数function dynamicUpdateInfo(){ if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { setTimeout("pollServer()",5000); } }}/********************后台************************/protected void Page_Load(object sender, EventArgs e) { string task = Request.QueryString["task"].ToString();//处理 }
ajax技术实现原理是什么?
Ajax和服务器端技术毫不相关;DOM模型是Ajax最本质的技术;在使用Ajax控件前理解它们的实现;学好JavaScript ;Ajax点缀:CSS 。 观点一:Ajax和服务器端技术毫不相关 严格的说,与传统web开发相比,Ajax是完完全全的客户端技术。由于很多控件封装了客户端和服务器端的通信过程,因此很多问题也因通信而起。事实上,不论何种Ajax技术,服务器端都是返回的一个纯文本流,再由客户端来处理这个文本。这段文本可以是xml格式,也可以是一个Html片段,也可以是一段JavaScript脚本,或者仅是一个字符串。服务器端仅仅是作为一个数据接口,客户端使用XMLHttpRequest对象来请求这个页面,服务器端在页面内写入结果文本,这个过程和普通的web开发没有任何区别。所不同的只是,客户端在异步获取结果后,不是直接显示在页面,而是由客户端的Javascript脚本处理后再显示在页面。至于各种控件所谓的能返回DataSet对象,Date对象,或者其他的数据类型,都是封装了这个处理过程的结果。 观点二:DOM模型是Ajax最本质的技术 之所以没有把XMLHttpRequest列为最本质的技术,因为本人觉得它实在是太简单了,它只是可以让浏览器在后台请求一个页面,并将其内容交给JavaScript处理。真正的核心应该是:DOM模型,即文档对象模型。在DOM模型里,Html标记都被认为是一个对象,例如:div对象,table对象等等。DOM模型就规定了这些对象所具有的属性、方法和事件。通过这些性质,可以对一个已经显示于浏览器的页面进行内容的修改,例如增加节点、修改节点位置,删除节点等等。而不仅仅是一个innerHTML属性这么简单,虽然这是一个很有用的属性。 观点三:在使用Ajax控件前理解它们的实现 使用Ajax控件的确可以提高效率,但如果你空中楼阁般使用控件,那就得不偿失了。从一个控件换到另外一个控件又会有一个漫长的学习曲线。所以应该从底层了解其,况且Ajax实在不是什么高深的技术。其实任何东西的最底层其实都是简单的,但如果封装了这些底层的东西,事情会变得复杂和难以理解。以Asp.net为例,它的定制特性可以使得只要在方法前加上[ajax method]类似这样的标志就可以称为一个异步方法,相信这使得Asp.net的Ajax开发显得更加“高效”或者是“神秘”,而更多的事情则被封装了。同样记住一条,任何对服务器端的请求仅仅是返回纯文本,我们不一定要依赖于封装好的处理过程,而完全可以自己来实现。 观点四:学好JavaScript 在大多数人看来,JavaScript总不是那么一种正规的语言,随便copy一段就碰巧能运行,学过c之类的人,一看也能看懂,而且在浏览器中常常有脚本错误提示,所以潜意识觉得总不能付之以大任。事实上,要学好Ajax,这就完全是一种错误的看法。javascript作为一种脚本语言,其语法的确不是很严格,但并不妨碍其完成诸多复杂的任务,没有JavaScript,就没有Ajax。所以本人强烈建议,学Ajax前,一定要好好研究一番JavaScript,一般来讲,如果能顺利看懂prototype框架的代码(如:prototype-1.3.1.js),你的JavaScript水平就基本过关了。同时对DOM模型也可以算有一个基本的了解。 观点五:Ajax点缀:CSS 用JavaScript控制CSS其实很简单,基本上每个DOM对象都有一个style对象,只要把css属性里的"-"去掉,并让随后的字母变为大写就可以作为属性使用了,例如:element.style.backgroundColor="#f00";在css是:选择符 {background-color:#f00}