Ajax之load,get,post方式和getJSON

为什么80%的码农都做不了架构师？>>>   

    首先是load方法能载入html代码并插入DOM中,获取静态文件

    load方法详解:

         load( String url,Object data(可选),Function callback(可选))

         其中url加载的是html页面

         data发送至服务器的key/value数据

         callback是指注册的回调函数

注:至始至终不知道这个data是干啥的,我想这个应该是提交到后台的数据参数,利用getParameter方法可以在后台里面获取,如果有知道的可以联系我

function loadFunction(){
	$("#divText").load('../html/LoadHtml1.html .class2',{name:"姓名"},callback);
	
}
function callback(responseText,textStatus,XMLHttpRequest){
	alert("调用了回调函数"+"1."+responseText+",2."+textStatus+",3."+XMLHttpRequest);
}

其中load方法参数url里有个.class2,这里指的是只加载LoadHtml1.html页面中的class=”class2”的所有元素结点的内容

Callback传入的参数:

    responseText:请求返回的内容,这里就是加载的html页面

    textStatus:请求状态,success,errir,notmodified,timeout等4种

    XMLHttpRequest:XMLHttpRequest对象

    只要请求完成(complete)后,回调函数(callback)就会被触发

 

 

如果是非静态传递一些参数给服务器页面,则需要$.get()或$.post()方法

$.get(String url (可选),Object data(可选),Function callback(可选),String type(可选))

其中,url 指的是提交的地址

data:发送到服务器端的数据(key/value),附加到url上

Callback:载入成功后回调的函数,当responseStatus为success时回调该方法,

Type:服务器端返回内容的格式,xml,html,script,json,text和_default

 

get方式提交的回调函数在书上写只有两个函数,但是根据官方文档和本人测验实际是有三个参数

Callback回调函数会在get方式提交成功后才会调用.

 

如果返回数据是xml格式,我们要对返回的内容进行处理,例

$(data).find(“comment”).attr(“username”)

我们需要在服务器端设置:response.setHeader(“COntent-Type:text/xml;charset=utf-8”)

 

Post方式:

$.post(String url (可选),Object data(可选),Function callback(可选),String type(可选))

 

$.post("postJsp.jsp",{name:$("#username").val(),age:$("#userage").val()},callback);

Get和post方式的最大的区别:get方式url后面会以?的形式添加key=value(&)

而post的参数会封装到消息的实体内容而不可见,会更加安全

一般get的url体积大小为2-4KB,具体也没有测过

$("#send").click(function(){
	//一般get和post方式提交到actionServlet去处理业务逻辑,返回内容,而不是提交到某一页面,将页面内容全部返回
	
	//1.这个是可以的,返回的内容responseText是getJsp.jsp页面的所有内容
	//$.post("getJsp.jsp",{username:$("#username").val(),userage:$("#userage").val()},callback);
	
	//2.这个是OK的,和下面的一样
	//$.get("../AjaxServletDemo",{username:$("#username").val(),userage:$("#userage").val()},callback);
	
	var username=$("#username").val();;
	//3.可以提交,并且获取的内容是后台response.getWriter()打印出来的
	$.get("../AjaxServletDemo?username="+username,null,callback);
	
});
function callback(responseText,textStatus,XMLHttpRequest){
	alert("调用了回调函数"+"1."+responseText+",2."+textStatus+",3."+XMLHttpRequest.readyState);
}

getJSON:

$.getJSON(String url,Function callback);
Url:提交地址
Callback:回调函数.


function ver1(){
	$.getJSON("testJson.json",callback);
}
function callback(data){
	alert(data.username[1]+data.userage);
}
testJson.json文件数据:
{"username":["GY","GY1"],"userage":"30"}
Json文件就是格式非常严格的纯文本

 

转载于:https://my.oschina.net/gy9311/blog/713854