jquery里面Ajax几种不同的调用方法

jquery使⽤⽅法jQuery是⽬前使⽤最⼴泛的javascript函数库。

据统计，全世界排名前100万的⽹站，有46%使⽤jQuery，远远超过其他库。

微软公司甚⾄把jQuery作为他们的官⽅库。

对于⽹页开发者来说，学会jQuery是必要的。

因为它让你了解业界最通⽤的技术，为将来学习更⾼级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。

⼀、选择⽹页元素jQuery的基本设计和主要⽤法，就是"选择某个⽹页元素，然后对其进⾏某种操作"。

这是它区别于其他函数库的根本特点。

使⽤jQuery的第⼀步，往往就是将⼀个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。

选择表达式可以是CSS选择器：1 $(document)//选择整个⽂档对象2 $('#myId')//选择ID为myId的⽹页元素3 $('div.myClass')//选择class为myClass的div元素4 $('input[name=first]')//选择name属性等于first的input元素也可以是jQuery特有的表达式：1 $('a:first')//选择⽹页中第⼀个a元素2 $('tr:odd')//选择表格的奇数⾏3 $('#myForm :input')//选择表单中的input元素4 $('div:visible') //选择可见的div元素5 $('div:gt(2)')//选择所有的div元素，除了前三个6 $('div:animated')//选择当前处于动画状态的div元素⼆、改变结果集如果选中多个元素，jQuery提供过滤器，可以缩⼩结果集：1 $('div').has('p'); //选择包含p元素的div元素2 $('div').not('.myClass'); //选择class不等于myClass的div元素3 $('div').filter('.myClass'); //选择class等于myClass的div元素4 $('div').first(); //选择第1个div元素5 $('div').eq(5); //选择第6个div元素有⼀些时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动⽅法：1 $('div').next('p'); //选择div元素后⾯的第⼀个p元素2 $('div').parent(); //选择div元素的⽗元素3 $('div').closest('form'); //选择离div最近的那个form⽗元素4 $('div').children(); //选择div的所有⼦元素5 $('div').siblings(); //选择div的同级元素三、链式操作选中⽹页元素以后，就可以对它进⾏某种操作。

jquery $.ajax 同步调用实现原理jQuery .ajax 同步调用实现原理在前端开发中，经常会涉及到使用Ajax进行异步请求。

而jQuery库中的.ajax()方法是非常常用的一种实现方式。

.ajax()方法使用起来非常方便，可以对数据进行异步请求，并且可以设置回调函数来处理返回的数据。

但是有时候我们需要在请求完成之前进行一些操作，此时可以使用同步调用的方式来实现。

本文将详细介绍使用jQuery .ajax()方法进行同步请求的实现原理。

1. .ajax()方法简介.ajax()是jQuery库中用于发送HTTP请求的核心方法。

它是一个异步方法，可以向服务器发送GET、POST等请求，并处理服务器返回的数据。

.ajax()方法使用一个包含键值对的配置对象作为参数，可以设置请求的地址、请求方式、请求参数、回调函数等。

当请求完成时，可以在回调函数中处理返回的数据。

2. 异步请求与同步请求的区别在讲解实现原理之前，我们先来了解一下异步请求和同步请求的区别：- 异步请求：是指在发送请求的同时，主线程不会阻塞，而是继续执行后续的代码。

当请求完成后，会通过回调函数来处理返回的数据。

异步请求一般使用于需要较长时间才能返回结果的场景，如网络请求、文件上传等。

- 同步请求：是指在发送请求的同时，主线程会一直等待请求的响应结果，而不会继续执行后续的代码。

只有在请求完成后，才会继续执行下面的代码。

同步请求一般使用于需要立即获取结果的场景，如表单提交、页面加载等。

在默认情况下，.ajax()方法是异步请求的，即发送请求后会继续执行后续的代码。

而实现同步请求则需要额外的设置。

3. 同步请求的设置要实现同步请求，可以通过设置.ajax()方法的async选项为false来实现。

async的默认值为true，表示异步请求，当设置为false时表示同步请求。

示例代码：javascript.ajax({url: 'example',async: false,其他配置项...success: function(data) {处理返回的数据}});4. 同步请求的实现原理实现同步请求的关键在于事先知道请求需要的时间，以便正确地进行阻塞。

jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。

废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到).1. load( url, [data], [callback] ) ：载入远程HTML 文件代码并插入至DOM 中。

url (String) : 请求的HTML页的URL地址。

data (Map) : (可选参数) 发送至服务器的key/value 数据。

callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。

这个方法默认使用GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。

jQuery 1.2 中，可以指定选择符，来筛选载入的HTML 文档，DOM 中将仅插入筛选出的HTML 代码。

语法形如"url #some > selector"。

这个方法可以很方便的动态加载一些HTML文件，例如表单。

示例代码：$(".ajax.load").load("[url]/QLeelulu/archive/2008/03/30/1130270.html[/url] .post",function (responseText, textStatus, XMLHttpRequest){this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0]//alert(responseText);//请求返回的内容//alert(textStatus);//请求状态：success，error//alert(XMLHttpRequest);//XMLHttpRequest对象});这里将显示结果。

jquery中$.ajax（）⽅法使⽤详解1.url说明：发送请求的地址（默认为当前页⾯），要求是String类型的参数，⽐如是.net下，"~wexin(控制器)/getweinxinmenu(动作)"，2.type说明：请求⽅法(post或者get)，默认是get，要求是String类型的参数。

其他的htpp请求如（put、delete）等也⽀持，但是要浏览器⽀持3.timeout说明：设置请求超时时间（毫秒），要求是number类型的参数。

此设置将覆盖$.ajaxSetup()⽅法的全局设置。

4.async说明：默认值为true，所有请求是异步，要求是Bool类型的参数，如果需要发送同步请求，将此项设置为false。

注意：同步时浏览器会被锁住。

5.cache说明：默认为true(当datatype为script时，默认为false)从浏览器缓存中加载请求信息，要求是Bool类型的参数。

6.data说明：发送到服务器的数据，要求是Object或string类型的参数。

如果已经不是字符串，将⾃动转换为字符串格式。

get请求中将附加在url 后。

防⽌这种⾃动转换，可以查看 processData选项。

对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。

如果是数组，JQuery将⾃动为不同值对应同⼀个名称。

例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

7.dataType:说明：预期服务器返回的数据类型，要求为String类型的参数。

如果不指定，JQuery将⾃动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。

JQUERY AJAX异步操作详细说明AJAX 全称 Asynchronous JavaScript and XML（异步的 JavaScript 和XML）。

它并非一种新的技术，而是以下几种原有技术的结合体。

1)使用CSS和XHTML来表示。

2)使用DOM模型来交互和动态显示。

3)使用XMLHttpRequest来和服务器进行异步通信。

4)使用javascript来绑定和调用。

通过AJAX异步技术，可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Request)/应答(Response)模型：1)不需要用户等待服务端响应。

在异步派发XMLHttpRequest请求后控制权马上就被返回到浏览器。

界面不会出现白板，在得到服务器响应之前还可以友好的给出一个加载提示。

2)不需要重新加载整个页面。

为XMLHttpRequest注册一个回调函数，待服务器响应到达时，触发回调函数，并且传递所需的少量数据。

“按需取数据”也降低了服务器的压力。

3)不需要使用隐藏或内嵌的框架。

在XHR对象之前，模拟Ajax通信通常使用hack手段，如使用隐藏的或内嵌的框架(<iframe>标签)。

下面介绍下AJAX中的重要对象：XMLHttpRequest。

XMLHttpRequest对象(XHR)XMLHttpRequest是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或接收XML及其他数据的一套API。

XMLHttpRequest对象首次以ActiveX对象形式在微软Internet Explorer(IE) 5中以引入。

其他浏览器制造商在认识到这一对象重要性后也纷纷实现了XMLHttpRequest对象，但是以一个本地JavaScript对象而不是作为一个ActiveX 对象实现。

而如今，由于安全性、标准等问题，微软已经在其IE 7中把XMLHttpRequest实现为一个本地JavaScript对象。

ajax调用java方法ajax调用java后台的方法,其实是通过url链接来访问。

下面是店铺为大家带来一篇ajax调用java方法，希望对大家有所帮助。

ajax调用java方法(一)public void doPost(HttpServletRequest req, HttpServletResponse resp) throwsServletException,java.io.IOException{//得到类名、方法名和参数String methodName=req.getParameter("methodName");String className=req.getParameter("className");Object[] objs=req.getParameterValues("params");Object targetObj;try {targetObj = Class.forName(className).newInstance();Object obj=MethodUtils.invokeMethod(targetObj, methodName, objs);this.dealResp(resp, obj);} catch (InstantiationException e) {e.printStackTrace();} catch (IllegalAccessException e) {e.printStackTrace();} catch (ClassNotFoundException e) {e.printStackTrace();} catch (NoSuchMethodException e) {e.printStackTrace();} catch (InvocationTargetException e) {e.printStackTrace();}}private void dealResp(HttpServletResponse resp,Object obj) throws IOException{resp.setContentType("text/xml;charset=GBK");PrintWriter pw=resp.getWriter();pw.write(""+deal(obj)+"");pw.flush();pw.close();}private String deal(Object obj){String sbResult="";if(obj==null){sbResult="";}else if(obj instanceof ng.String){sbResult=dealString(obj);}else if(obj instanceof java.util.List){sbResult=dealList(obj);}else if(obj instanceof ng.Boolean){sbResult=dealBoolean(obj);}else if(obj instanceof ng.Double){sbResult=dealDouble(obj);}else if((obj instanceof ng.Integer) || (obj instanceof ng.Long)){sbResult=dealInteger(obj);}else if(obj instanceof ng.Throwable){sbResult=dealException(obj);}else if(obj instanceof java.util.Map){sbResult=dealMap(obj);}else if(obj instanceof java.util.Date){sbResult=dealDate(obj);}else if(obj instanceof java.util.Calendar){sbResult=dealDate(obj);}else if(obj instanceof org.w3c.dom.Document){sbResult=dealXml(obj);}else{sbResult=dealObject(obj);}return sbResult;}//处理Date或Calendar类型，返回值为yyyy-MM-dd-HH-mm-ss-SSS格式的字符串private String dealDate(Object obj){Calendar cal=null;if(obj instanceof Calendar){cal=(Calendar)obj;}else{cal=Calendar.getInstance();cal.setTime((Date)obj);}StringBuffer sb=new StringBuffer();sb.append("");sb.append(cal.get(Calendar.YEAR));sb.append("-");sb.append(cal.get(Calendar.MONTH));sb.append("-");sb.append(cal.get(Calendar.DAY_OF_MONTH));sb.append("-");sb.append(cal.get(Calendar.HOUR_OF_DAY));sb.append("-");sb.append(cal.get(Calendar.MINUTE));sb.append("-");sb.append(cal.get(Calendar.SECOND)); sb.append("-");sb.append(cal.get(LISECOND)); sb.append("");return sb.toString();}private String dealMap(Object obj){ StringBuffer sb=new StringBuffer();Map map=(Map)obj;sb.append("");Set entrys=map.entrySet();Iterator ite=entrys.iterator();Map.Entry entry=null;while(ite.hasNext()){entry=(Map.Entry)ite.next();sb.append("<");sb.append(entry.getKey());sb.append(">");sb.append(deal(entry.getValue()));sb.append(");sb.append(entry.getKey());sb.append(">");}sb.append("");return sb.toString();}ajax调用java方法(二)public class Test {public static String sayHello(String name){ return "hello, " + name;}}注意：必须是公开的静态方法。

通过JQuery的Ajax调用一般处理程序通过JQuery的Ajax调用一般处理程序前言：本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler)，获取表格需要显示的信息，然后转换成json格式返回给前台，前台获取到数据后循环构建表格的行，最好把行附加到表里。

目标：a熟悉简单JQueryAjax的使用b了解如何构造基本的`Json格式的数据（构建Json也可以通过第三方的dll）c熟悉下handler的基本用法1简单效果图2前台代码<%@page=""language="C#"autoeventwireup="true"codefile="D ialogAjax.aspx.cs"inherits="JQueryTest_DialogAjax">3Handler代码<%@webhandler=""language="C#"class="TestHandler">usingSy stem;usingSystem.Web;usingSystem.Collections.Generic;usingS ystem.Text;usingDataDAL;usingDataEnity;publicclassTestHandl er:IHttpHandler{HttpRequestRequest;HttpResponseResponse;pub licvoidProcessRequest(HttpContextcontext){//不让浏览器缓存context.Response.Buffer=true;context.Response.ExpiresAbsolu te=DateTime.Now.AddDays(-1);context.Response.AddHeader("pragma","no-cache");context.Response.AddHeader("cache-control","");context.Response.CacheControl="no-cache";context.Response.ContentType="text/plain";Request=co ntext.Request;Response=context.Response;stringmethod=Reques t["Method"].ToString();System.Reflection.MethodInfomethodIn fo=this.GetType().GetMethod(method);methodInfo.Invoke(this, null);}publicvoidGetModuleInfo(){StringBuildersb=newStringB uilder();stringjsonData=string.Empty;ListlsModule=ModuleDAL .GetModuleList();sb.Append("{"Module":[");for(inti=0;i<lsMo dule.Count;i++){jsonData="{"ModuleNum":"+"""+lsModule[i].Mo duleNum+"""+","ModuleName":"+"""+lsModule[i].ModuleName+""" +","ModuleDes":"+"""+lsModule[i].ModuleDes+"""+"},";sb.Appe nd(jsonData);}if(lsModule.Count>0)sb=sb.Remove(sb.Length-1,1);sb.Append("]}");Response.Write(sb);}publicboolIsReusab le{get{returnfalse;}}}以上代码超简单吧，JQueryAjax动态生成Table表格的内容就全部完成了，希望对大家有所帮助。

JQuery中的AJAX详解目录(?)[-]load()方法load(url,[data],[callback])url为被加载的页面地址data表示发送到服务器的数据，格式为key/valuecallback格式为：function(responseText,textStatus,XMLHttpRequest){ }//responseText:请求返回的内容//textStatus:请求状态：success、error、notmodified、timeout这4种//XMLHttpRequest:XMLHttpRequest对象load()方法的传递方式根据参数data来自动指定。

如果没有参数传递，则采用GET方式传递；反之，则自动转换为POST 方式[javascript]view plaincopyprint?1.$("#div1").load(2."jsp/feed.jsp", //如果为" jsp/feed.jsp .filterClass"，则表示获取jsp页面中类名为filterClass的全部元素3.{4. name ：clf, age : 255.//经测试，变量名加引号、单引号、不加引号，后台都能取到值6.//如果含有中文，必须用encodeURI()进行编码，然后再服务器端用decodeURI()解码即可，如7.// {name:encodeURI($("#uName").val()),"password":$("#uPassword").val()},8.}, //也可以用数组传值，{"attr []",["clf","25","male"]}9.function (){10. $("#div2").text("AJAX");11.}12.);[javascript]view plaincopyprint?1.$("div").load("wrongname.xml",function(response,status,xhr){2.if (status=="success")3. {4. $("div").html("<ol></ol>");5. $(response).find("artist").each(function(){6. <span style="white-space:pre"> </span>varitem_text = $(this).text();7. <span style="white-space:pre"> </span>$('<li></li>').html(item_text).appendTo('ol');8. <span style="white-space:pre"> </span> });9. }10.else11. {12. $("div").html("Anerror occured: <br/>" + xhr.status + " " + xhr.statusText)13. }14. });getJSON()方法getJSON(url,[data],[callback])callback格式为function(data,textStatus) { }data是一个返回的json对象[javascript]view plaincopyprint?1.$.getJSON("test.js",{ name: "John", time: "2pm" }, function(json){2. alert("JSON Data: " +ers[3].name);3.});getScript()方法getScript(url,[callback])callback格式为function(response,status)response - 包含来自请求的结果数据status - 包含请求的状态（"success","notmodified", "error", "timeout" 或"parsererror"）通过此函数注入的脚本会自动执行get()方法get(url,data,callback(response,status,xhr),dataType)dataType可能的类型："xml"、"html" 、"text"、"script"、"json"、"jsonp"get() 方法通过远程HTTPGET 请求载入信息。

jQuery操作Ajax和Json嗯，自己学SSH和做项目也已有两个月了。

自己今天来整理一下自己在项目中利用jQuery操作过的Ajax和Json。

当时我对于jQuery操作Ajax几乎不怎么了解，但是项目中有需求，所以自己也是必须要去使用，因此现在来详细讲解一下自己在项目中的操作。

功能中，有一个下拉框，里面存储的是服务商的信息，首选项是“--请选择--”，当我选择第一个下拉框中服务商信息之后，后面紧接着将会得到这个选定的服务商下的所有产品。

做一个联动操作。

虽然我不会用jQuery操作Ajax，但是我第一反应就是想到利用这块技术，于是自己就开始查找对应的资料了。

首先，我在Action中，将服务商的信息从数据库查找出来，保存到List集合中，将集合转发到JSP界面上，利用的是struts2标签：<div><s:select name="provider.iscenicid"list="#request.providerList"listKey="i scenicid"listValue="szcenicname"headerKey=""headerValue="--请选择"onchange="onChangeOptionScenic(this)"id="scenicType"/></s:select><span id="productInfo"></span></div>（ps:其实这个里面，本不应该设置headerKey和headerValue，应该在Action中在List集合中去增加一行再进行操作。

）中间的span标签就是将要利用jQuery操作Ajax把产品信息增加到span标签里面！其次，进行jQuery操作Ajax了：<script>function onChangeOptionScenic(_this) {// 获取下拉框中的listKey值var iscenic =$(_this).val();// 设置一个变量，来进行下面的操作var htmltv ="";// 设置URL地址var url ="/tips/travelmessage.action";// Ajax操作开始$.ajax ({// 设定URLurl : url,// 设置提交方式，这里为posttype : "post",// 设置数据类型为JsondataType : "json",// 设置传过去的值的属性名data : {"iscenicid" : iscenic},// 成功返回之后的操作方法success : function(result) {// 获取Action中传回来的result的值var json =eval("("+result+")");// 循环将服务商下的产品以复选框形式拼接出来for(var i=0; i<json.length; i++) {// 将产品信息以复选框形式拼接起来htmltv +="<input type='checkbox' name='productNa me'value='"+json[i].productId+"'/>"+json[i].prod uctName;}// 添加到上面的span标签中$("#productInfo").val(htmltv);}});}</script>最后，将result进行一个映射文件的配置，配置信息如下（根据公司的一些设定而操作）：<action name="travelmessage"class="com.web.system.tips.TravelMessageAction" method="trav elMessage"><result type="json"><param name="root">result</param></result></action>在TravelMessageAction中，需要将内容返回到result中，部分代码如下：List productList = travelMessageService.getProductInfo(product);JSONArray json =new JSONArray().fromObject(productList);result = json.toString();return SUCCESS;至此，一个完整的操作已完成，这就是自己的一点点整理，希望以后有更多的有技术的知识与大家分享！。

jq的ajax写法在使用jq（jQuery）进行AJAX（异步JavaScript和XML）请求时，可以使用以下写法：1. 使用$.ajax()方法：javascript.$.ajax({。

url: "请求的URL",。

method: "请求方法（GET、POST等）",。

data: "请求参数（可选）",。

dataType: "预期的响应数据类型（可选）",。

success: function(response) {。

// 可以在这里处理响应数据。

},。

error: function(xhr, status, error) {。

// 请求失败时的回调函数。

// 可以在这里处理错误信息。

}。

});2. 使用$.get()方法发送GET请求：javascript.$.get("请求的URL", function(response) {。

// 可以在这里处理响应数据。

});3. 使用$.post()方法发送POST请求：javascript.$.post("请求的URL", "请求参数（可选）",function(response) {。

// 请求成功时的回调函数。

// 可以在这里处理响应数据。

});4. 使用$.getJSON()方法发送GET请求并期望JSON格式的响应： javascript.$.getJSON("请求的URL", function(response) {。

// 请求成功时的回调函数。

// 可以在这里处理响应数据。

});这些是jq中常用的AJAX写法，你可以根据具体需求选择适合的方法。

请注意，以上代码仅为示例，你需要根据实际情况替换URL、请求方法、请求参数和回调函数等内容。

jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。

废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到).1. load( url, [data], [callback] ) ：载入远程HTML 文件代码并插入至DOM 中。

url (String) : 请求的HTML页的URL地址。

data (Map) : (可选参数) 发送至服务器的key/value 数据。

callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。

这个方法默认使用GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。

jQuery 1.2 中，可以指定选择符，来筛选载入的HTML 文档，DOM 中将仅插入筛选出的HTML 代码。

语法形如"url #some > selector"。

这个方法可以很方便的动态加载一些HTML文件，例如表单。

示例代码：$(".ajax.load").load("/yeer/archive/2009/06/10/ 1500682.html .post",function (responseText, textStatus, XMLHttpRequest){this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0]//alert(responseText);//请求返回的内容//alert(textStatus);//请求状态：success，error//alert(XMLHttpRequest);//XMLHttpRequest对象});这里将显示结果。

jqueryajax调⽤springboot接⼝发送json数据⽰例，兼容跨域调⽤，解决m。

本⽂主要解决三个问题：1.解决maven项⽬中引⽤本地lib⽬录的jar包时打包失败的问题2.解决spring boot开发的微服务接⼝中的跨域问题3.ajax 发送json数据的问题昨天研究 office 外接程序开发时，发现在插件中调⽤后台由 Spring boot 开发的接⼝并传递json时总是失败，调试了半天，尝试了$.ajax，$.post等⽅法服务端均⽆法获取到正确的请求，发送到后端的请求的格式是application/www-urlencode，⽽后端接受的是application/json格式的数据，由于⽤postman测试接⼝可以正常返回，应该可以说明后台接⼝没有问题。

1.解决maven项⽬中引⽤本地lib⽬录的jar包时打包失败的问题其实在⼀开始编写后台接⼝时，也遇到了⼀些问题，因为接⼝中引⽤了⼀个项⽬本地的lib⽬录中的jar包，⽽这个jar包并未⽤maven管理，所以调试和打包上遇到了⼀些问题，以前使⽤mvn clean install就可以完成的动作，现在⼀直报错，在pom中这样修改就可以解决了：<build><!-- 加上下⾯的，mvn命令会报错，现在直接调试完毕后，mvn package即可--><resources><resource><directory>lib</directory><targetPath>/BOOT-INF/lib/</targetPath><includes><include>**/*.jar</include></includes></resource></resources><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><configuration><skip>true</skip></configuration></plugin><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-surefire-plugin</artifactId><configuration><skip>true</skip></configuration></plugin></plugins></build>2.解决spring boot开发的微服务接⼝中的跨域问题由于服务端⽇志中⼀直观察不到ajax调⽤的正确请求，于是祭出终极⼤杀器——抓包，打开WireShark，选择对应的⽹卡，参数设置成：ip.dst_host== 你接⼝服务器的ip && tcp.dstport ==你接⼝服务监听的端⼝抓包后发现，第⼀个HTTP请求竟然不是POST，⽽是OPTIONS：这不是我嘞个⼤擦了么…… ⽴马拿出万能钥匙——⾕歌搜索引擎开始解决问题，输⼊关键字“http options request”，看到第⼀条就应该是我要的答案了：沿着指路明灯给出的航向继续前进（）：OPTIONSThe HTTP OPTIONS method requests permitted communication options for a given URL or server. A client can specify a URL with thismethod, or an asterisk (*) to refer to the entire server.继续往下翻，看到了这段⽂字：In , a is sent with the OPTIONS method so that the server can respond if it is acceptable to send the request. In this example, we will request permission for these parameters:The header sent in the preflight request tells the server that when the actual request is sent, it will have a request method.The header tells the server that when the actual request is sent, it will have the X-PINGOTHER and Content-Type headers.我恍然⼤悟，原来是跨域调⽤的问题。

jquery中ajax处理跨域的三⼤⽅式由于JS同源策略的影响，因此js只能访问同域名下的⽂档。

因此要实现跨域，⼀般有以下⼏个⽅法：⼀、处理跨域的⽅式：1.代理2.XHR2HTML5中提供的XMLHTTPREQUEST Level2（及XHR2）已经实现了跨域访问。

但ie10以下不⽀持只需要在服务端填上响应头：header("Access-Control-Allow-Origin:*");/*星号表⽰所有的域都可以接受，*/header("Access-Control-Allow-Methods:GET,POST");3.jsonP原理：ajax本⾝是不可以跨域的，通过产⽣⼀个script标签来实现跨域。

因为script标签的src属性是没有跨域的限制的。

其实设置了dataType: 'jsonp'后，$.ajax⽅法就和ajax XmlHttpRequest没什么关系了，取⽽代之的则是JSONP协议。

JSONP是⼀个⾮官⽅的协议，它允许在服务器端集成Script tags返回⾄客户端，通过javascript callback的形式实现跨域访问。

ajax的跨域写法：（其余写法和不跨域的⼀样）：⽐如/*当前⽹址是localhost:3000*/js代码$.ajax({type:"get",url:"http://localhost:3000/showAll",/*url写异域的请求地址*/dataType:"jsonp",/*加上datatype*/jsonpCallback:"cb",/*设置⼀个回调函数，名字随便取，和下⾯的函数⾥的名字相同就⾏*/success:function(){。

}});/*⽽在异域服务器上，*/app.jsapp.get('/showAll',students.showAll);/*这和不跨域的写法相同*//*在异域服务器的showAll函数⾥，*/var db = require("./database");exports.showAll = function(req,res){/**设置响应头允许ajax跨域访问**/res.setHeader("Access-Control-Allow-Origin","*");/*星号表⽰所有的异域请求都可以接受，*/res.setHeader("Access-Control-Allow-Methods","GET,POST");var con = db.getCon();con.query("select * from t_students",function(error,rows){if(error){console.log("数据库出错："+error);}else{/*注意这⾥，返回的就是jsonP的回调函数名+数据了*/res.send("cb("+JSON.stringify(r)+")");}});}⼆、解决ajax跨域访问、 JQuery 的跨域⽅法JS的跨域问题，我想很多程序员的脑海⾥⾯还认为JS是不能跨域的，其实这是⼀个错误的观点；有很多⼈在⽹上找其解决⽅法，教其⽤IFRAME去解决的⽂章很多，真有那么复杂吗？其实很简单的，如果你⽤JQUERY，⼀个GETJSON⽅法就搞定了，⽽且是⼀⾏代码搞定。

Jquery中$.get（）,$.post（）,$.ajax（）,$.getJSON（）的⽤法总结详细解读Jquery各Ajax函数：$.get(),$.post(),$.ajax(),$.getJSON()⼀，$.get(url,[data],[callback])说明：url为请求地址，data为请求数据的列表，callback为请求成功后的回调函数，该函数接受两个参数，第⼀个为服务器返回的数据，第⼆个参数为服务器的状态，是可选参数。

⽽其中，服务器返回数据的格式其实是字符串形势，并不是我们想要的json数据格式，在此引⽤只是为了对⽐说明复制代码代码如下:$.get("data.php",$("#firstName.val()"),function(data){$("#getResponse").html(data); }//返回的data是字符串类型);⼆，$.post(url,[data],[callback],[type])说明：这个函数跟$.get()参数差不多，多了⼀个type参数，type为请求的数据类型，可以是html,xml,json等类型，如果我们设置这个参数为：json，那么返回的格式则是json格式的，如果没有设置，就和$.get()返回的格式⼀样，都是字符串的复制代码代码如下:$.post("data.php",$("#firstName.val()"),function(data){$("#postResponse").html();},"json"//设置了获取数据的类型，所以得到的数据格式为json类型的);三，$.ajax(opiton)说明：$.ajax()这个函数功能强⼤，可以对ajax进⾏许多精确的控制，需要详细说明的请参照相关资料复制代码代码如下:$.ajax({url: "ajax/ajax_selectPicType.aspx",data:{Full:"fu"},type: "POST",dataType:'json',success:CallBack,error:function(er){BackErr(er);}});四，$.getJSON(url,[data],[callback])复制代码代码如下:$.getJSON("data.php",$("#firstName.val()"),function(jsonData){$("#getJSONResponse").html(jsonData.id);}//⽆需设置，直接获取的数据类型为json，所以调⽤时需要使⽤jsonData.id⽅式);When Ajax meets jQuery 基于AJAX的应⽤现在越来越多，⽽对于前台开发⼈员来说，直接和底层的HTTPRequest打交道⼜不是⼀件令⼈愉快的事情。

参数: optio ns返回值: xml HttpReq uest使用HTTP请求一个页面。

这是jque ry的低级ajax实现。

要查看高级抽象，见$.set、$.post等，这些方法更易于理解和使用。

但是功能上有限制(例如，没有错误处理函数)。

警告：如果数据类型指定为"scrip t"，那么POST自动转化为GET方法。

(因为script会作为一个嵌入页面的script标签进行载入)$.ajax()函数返回它创建的XMLH ttpRequest对象。

在大部分情况下，你不需要直接操作此对象。

通常，这个XMLH ttpReq uest对象主要用于需要手动中断XMLH ttpRequest请求的时候。

注意：如果你指明了下面列出的数据类型，请确保服务端发送了正确的MIME响应类型(如. xml 的类型是"te xt/xml")。

错误的MIME类型能够导致脚本出现意想不到的问题。

请查看AJAX的范例来了解数据类型的更多信息。

$.ajax()函数需要一个参数，一个包含有键/值对的对象，用于初始化并操作请求对象。

在jQue ry 1.2版本中，如果你指明了一个JSONP回调函数，你就可以从其它的域中载入JSON类型的数据，写法类似于"myurl?callback=?" 。

jQuery会自动调用正确的方法名称来代替查询字符串，执行你指定的回调函数。

或者，你也可以指定jso np的数据类型的回调函数，此函数会自动添加到Ajax请求中。

参数选项:async(true) 数据类型: Boolean默认情况下，所有的请求都是异步发送的(默认为true)。

如果需要发送同步请求, 设置选项为false。

注意，同步请求可能会暂时的锁定浏览器, 当请求激活时不能进行任何操作。

beforeSe nd 数据类型: Functio n一个预处理函数用于在发送前修改XMLHttpReq uest对象，设置自定义头部等。

java中ajax请求的五个步骤
在Java中进行Ajax请求的五个步骤如下：
1. 创建XMLHttpRequest对象：使用JavaScript的XMLHttpRequest对象来发起Ajax请求。

在Java中，可以使
用HttpURLConnection或者HttpClient等类进行Ajax请求的发送。

2. 设置请求参数：通过调用XMLHttpRequest对象的相应方法，例如open()方法来设置请求的URL和请求方式（GET或POST），还可以设置请求头和其他一些请求参数。

3. 发送请求：通过调用XMLHttpRequest对象的send()方法发
送Ajax请求。

4. 接收响应：通过调用XMLHttpRequest对象的onreadystatechange事件的回调函数来监听Ajax请求的响应。

在回调函数中，可以通过XMLHttpRequest对象的readyState
属性来获取当前状态，然后再根据状态来获取响应数据。

5. 处理响应数据：通过XMLHttpRequest对象的response属性
来获取Ajax请求的响应数据。

根据请求的数据类型（例如文本、JSON、XML等），可以使用不同的方式对响应数据进行
处理。

例如，可以使用JavaScript的JSON.parse()方法解析JSON数据，或者使用XML处理API解析XML数据。

js调用方法的三种写法
JavaScript定义了三种调用函数的方法，分别是：直接调用函数、以call()方法调用函数、以及以apply（）方法调用函数。

下面介绍一下这三种方法。

1、直接调用函数。

这个方法是我们最常用的，也是最普通的方式。

它直接以函数附加的对象作为调用者，在函数后括号内传入参数来调用函数。

2、call()方法调用函数。

上文中的直接调用函数的方法虽然很简单，但是调用方式不够灵活。

有时候调用函数需要动态地传入一个函数引用，为了动态地调用函数，这个时候就需要用call()方法了。

3、apply（）方法调用函数。

apply()方法与call方法类似，它们都可以动态调用函数，它们的区别如下：通过call()调用函数的时候，需要在括号中详细地列出每个参数。

通过apply()动态地调用函数的时候，需要以数组的形式一次性传入所有调用参数。

apply()和call()的对应关系如下：函数引用.call(调用者，参数一，参数二......)=函数引用.apply(调用者，[参数一，参数二......])。

JQuery中Ajax的操作完整例⼦Java软件开发中，后台中我们可以通过各种框架，像SSH等进⾏对代码的封装，⽅便我们对Java代码的编写，例如，Struts,SpringMVC对从前台到action的流程进⾏封装控制，使我们只需要进⾏⼀些简单配置就可以实现；⽽spring进⾏了对各种对象的管理进⾏封装，提供了AOP编程的⽅式，⼤⼤⽅便了我们；⽽hibernate和IBatis则是对JDBC代码进⾏封装，不需要我们每次都写那些重复⽽繁杂的JDBC代码。

前台呢，对于页⾯⼀些效果，验证等，我们都是通过JavaScript语⾔进⾏完成的，但是它也就像我们的Java代码⼀样，是最前台语⾔最基础的，⽽jQuery则是对js代码进⾏封装⽅便我们前台代码的编写，⽽且它还有⼀个⾮常⼤的优势就是解决了浏览器的兼容问题，这也是我们使⽤它⾮常重要的原因之⼀。

⽽现在为了满⾜⽤户的需求，Ajax（Asynchronous Javascript + XML）异步刷新起到了⽆可⽐拟的作⽤，以前写Ajax操作，总是需要我们想JDBC代码⼀样进⾏⼏个必备的步骤：AJAX——核⼼XMLHttpRequest对象，⽽JQuery也对Ajax异步操作进⾏了封装，这⾥看⼀下⼏种常⽤的⽅式。

$.ajax，$.post， $.get， $.getJSON。

⼀， $.ajax，这个是JQuery对ajax封装的最基础步，通过使⽤这个函数可以完成异步通讯的所有功能。

也就是说什么情况下我们都可以通过此⽅法进⾏异步刷新的操作。

但是它的参数较多，有的时候可能会⿇烦⼀些。

看⼀下常⽤的参数：var configObj = {method //数据的提交⽅式：get和posturl //数据的提交路劲async //是否⽀持异步刷新，默认是truedata //需要提交的数据dataType //服务器返回数据的类型，例如xml,String,Json等success //请求成功后的回调函数error //请求失败后的回调函数}$.ajax(configObj);//通过$.ajax函数进⾏调⽤。