Javascript高级ajax、jsonp

最新推荐文章于 2024-11-14 23:57:40 发布

jl10267019

最新推荐文章于 2024-11-14 23:57:40 发布

阅读量299

点赞数 2

文章标签： ajax jsonp

Form表单的回顾

在前面学习HTML时，我们学习过form表单，但是因为没有服务器，所以大家可能不清楚form标签中的一些属性的作用，这里就稍微回顾下：

<!--

action表示服务器请求的路径，method表示请求的方法类型

get请求会将数据显示在地址栏上，而且get请求在服务器端编码需求特殊处理

所以如果不是要求使用get请求，尽量不要使用get请求

post不会显示，但是这两种都不太安全，使用一些抓包工具就可以将我们

输入页面的信息得到，建议大家使用安全的网络，不要随意连接陌生的网络

-->

<formaction="ajax.do"method="post">

用户名称：<inputtype="text"name="username"id="username"class="username"/><br/>

用户密码：<inputtype="password"name="password"id="password"class="password"/><br/>

<inputtype="submit" id="submit"value="注册用户"/>

<inputtype="reset" id="reset"value="重置数据"/>

</form>

服务器端使用java搭建，当我们使用get和post做实验时发现，get请求的编码需要做特殊处理，而post就简单点：

Ajax的使用

下面我们使用ajax来从服务器端获取数据：

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>form测试</title>

<scripttype="text/javascript">

/**

* ajax的使用分四步走

functiongetDate() {

//1、创建XMLHttpRequest对象，注意，IE6的兼容问题

varxhr = newXMLHttpRequest();

//打开连接，open方法有三个参数

/**

* 第一个是访问的请求方式

* 第二个是访问服务器的URi

* 第三个是一个Boolean值，true表示异步，

* false表示同步，一般为异步，默认是true

* 当请求是GET时，参数可以直接在URL后面拼接，如：

* ajax.do?name=liujianhong&password=123

* 当参数拼接时，一定要加?表示携带参数，当存在多个参数时，

* 每个参数间使用&拼接，注意参数时键值对的方式，以等号连接

xhr.open("GET","ajax.do",true);

//3、ajax的回调函数

xhr.onreadystatechange= function() {

/**

* 注意：回调函数会触发好几次，但是我们一般只会使用最后一次

* 就是请求完成的触发,readState 等于4的时候

/**

* 0 请求未初始化（在调用 open() 之前）

*1请求已提出（调用send() 之前）

*2请求已发送（这里通常可以从响应得到内容头部）

*3请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）

*4 请求已完成（可以访问服务器响应并使用它）

//alert(xhr.readyState);

/**

* readyState等于4表示请求已经结束，服务器响应完成

* status表示http请求的状态，200表示正常响应

* 404表示资源不可达（找不到）

* 500表示服务器端错误

if (xhr.readyState== 4 &&xhr.status== 200) {

//说明请求完成，并且成功

alert(xhr.responseText);//得到服务器端的文本数据

alert(xhr.responseXML);//得到服务器端的XML数据

}

};

/**

* 发送数据，如果没有数据，可以不传递数据或者传递null,如:xhr.send(null);

* 如果post请求传递数据，则这样写

* 首先设置一下xhr的请求头信息

* xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

* 再这样传递参数

* xhr.send(name=liujianhong&password=123);

xhr.send();

}

//下面代码是为了兼容IE6及其以下版本，现在可以不做考虑

/*function ajaxFunction() {

var xmlHttp;

try {

// Firefox, Opera 8.0+, Safari

xmlHttp = new XMLHttpRequest();

} catch(e) {

// Internet Explorer

try {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch(e) {

try {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch(e) {

alert("您的浏览器不支持AJAX！");

return false;

}

return xmlHttp;

}*/

</script>

</head>

<body>

<buttononclick="getDate()">请求数据</button>

<divid="content"></div>

</body>

</html>

Ajax的使用包括了四步：

1、得到XMLHttpRequest对象，注意如果要兼容IE6则使用我注释的代码

2、使用XMLHttpRequest对象的open方法，注意参数问题

3、 Ajax的回调函数，服务器响应后，得到数据的处理

4、发送请求send方法。

下面我们使用ajax来做一个案例：

因为ajax请求服务器可以响应两种数据过来：XML和json，所以我们针对两种情况来处理：

XML数据的处理：

<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">

<title>Insert title here</title>

<scripttype="text/javascript">

window.onload= init;

functioninit() {

//1、获取部门节点

vardn =document.getElementById("dep");

//2、为该节点创建onchange

dn.onchange= getPerson

//3、创建一个getPerson的方法来处理事件

}

functiongetPerson() {

vardid =this.value;

//1、获取XMLHttpRequest;

varxhr = newXMLHttpRequest();

//2、通过xhr来打开页面，使用POST

xhr.open("POST","person.do",true);

xhr.onreadystatechange= function() {

//3、处理请求

if(xhr.readyState== 4 &&xhr.status== 200) {

//3.1、获取xml节点

varxmlDoc =xhr.responseXML;

//3.2、获取所有的person节点

varpns =xmlDoc.getElementsByTagName("person");

//3.3、遍历所以节点，获取id，name等信息

var node= "";

for(vari =0; i< pns.length; i++) {

node+= getValueByProp(pns[i],"id")+ "----------" +

getValueByProp(pns[i],"name")+ "----------" +

getValueByProp(pns[i],"age")+ "<br/>"

}

//3.4、写入到persons

document.getElementById("persons").innerHTML= node;

}

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhr.send("did=" +did);

//4、发送信息,需要传入did

}

//根据节点获取值

functiongetValueByProp(node,prop) {

return(node.getElementsByTagName(prop))[0].firstChild.nodeValue;

}

</script>

</head>

<body>

<selectid="dep">

<optionvalue="1">普通组</option>

<optionvalue="2">明星组</option>

<optionvalue="3">西游组</option>

</select>

<divid="persons"></div>

</body>

</html>

在XML数据在接受是使用responseXML来接受，之后就是解析数据了，这些事DOM中知识，相信大家都没有问题的。

Json数据的处理：

<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">

<title>Insert title here</title>

<scripttype="text/javascript">

window.onload= init;

functioninit() {

//1、获取部门节点

vardn =document.getElementById("dep");

//2、为该节点创建onchange

dn.onchange= getPerson

//3、创建一个getPerson的方法来处理事件

}

functiongetPerson() {

vardid =this.value;

//1、获取XMLHttpRequest;

varxhr = newXMLHttpRequest();

//2、通过xhr来打开页面，使用POST

xhr.open("POST","personJson.do",true);

xhr.onreadystatechange= function() {

//3、处理请求

if(xhr.readyState== 4 &&xhr.status== 200) {

//3.1、获取json

var json= xhr.responseText;

//如果传递的是json可以直接通过xhr.responseText获取。

//3.2、此时json是一个字符串，如果要转换为对象需要使用eval

varps =eval(json);

var node= "";

for(vari =0; i< ps.length; i++) {

//json就是已经是个javascirpt的对象了，可以直接使用

node+= ps[i].id+ "--------" +ps[i].name +"--------" +

ps[i].age + "<br/>";

}

//3.4、写入到persons

document.getElementById("persons").innerHTML= node;

}

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhr.send("did=" +did); //4、发送信息,需要传入did

}

</script>

</head>

<body>

<selectid="dep">

<optionvalue="1">普通组</option>

<optionvalue="2">明星组</option>

<optionvalue="3">西游组</option>

</select>

<divid="persons"></div>

</body>

</html>

Json接受数据是使用responseText来接受，默认是字符串，所以要讲字符串转换为json数据，使用eval这个全局函数，将字符串转换为javascript脚本，javascript就能识别为json对象了。

服务器端的项目是java项目，我压缩了，大家导入eclipse中就可以使用了

注意：XML和json在项目中可能都会使用，虽然现在越来越多的公司使用json来传输数据，但是XML依旧可能使用，要求大家两种都掌握。

jQuery中的Ajax

ajax虽然很好用，但是原生的写法有点复杂，所以一些js库对它的四步进行了封装，让ajax更加的好用，那么下面我们以jQuery为例，看看jQuery的ajax如何使用。

jQuery提供了好多ajax的方法，最原始的一个是$.ajax()方法：

jQuery原生ajax方法：

<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">

<title>Insert title here</title>

<scripttype="text/javascript"src="js/jquery-1.11.1.js"></script>

<scripttype="text/javascript">

$(function() {

$("#dep").on("change", getPerson);

});

functiongetPerson() {

vardid =this.value;

$.ajax({

type: "post"//表示请求类型,

url:"personJson.do",//请求的URL

data: "did=" +did, //请求的参数

async:true, //是否异步

success: function(data) {

//成功后的回调函数传递的参数就是服务器端传递的参数

varps =eval(data);

var node= "";

for(vari =0; i< ps.length; i++) {

//json就是已经是个javascirpt的对象了，可以直接使用

node+= ps[i].id+ "--------" +ps[i].name +

"--------" +

ps[i].age + "<br/>";

}

//3.4、写入到persons

document.getElementById("persons").innerHTML= node;

}

});

}

</script>

</head>

<body>

<selectid="dep">

<optionvalue="1">普通组</option>

<optionvalue="2">明星组</option>

<optionvalue="3">西游组</option>

</select>

<divid="persons"></div>

</body>

</html>

Load方法：

加载一个路径下的静态页面：

<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">

<title>Insert title here</title>

<scripttype="text/javascript"src="js/jquery-1.11.1.js"></script>

<scripttype="text/javascript">

$(function(){

$("#content").load("a.html");

});

</script>

</head>

<divid="content"></div>

<body>

</body>

</html>

此时a.html页面：

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

</head>

<body>

<h1>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</h1>

</body>

</html>

运行结果：

Load方法不常用，知道就行了。

jQuery中的ajax原生方法使用的比较多，除了这个以外，最常使用就是如下写方法：

get方法和post方法用法一样，就是jQuery认为method只有两个值，如果我们确实想使用其中一个值，就可以对应的使用其中一个方法。

<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">

<title>Insert title here</title>

<scripttype="text/javascript"src="js/jquery-1.11.1.js"></script>

<scripttype="text/javascript">

$(function() {

$("#dep").on("change", getPerson);

});

functiongetPerson() {

vardid =this.value;

$.get("personJson.do", {"did=": did},

function(data) {

varps =eval(data);

var node= "";

for(vari =0; i< ps.length; i++) {

node+= ps[i].id+ "--------" +ps[i].name +"--------" +

ps[i].age + "<br/>";

}

document.getElementById("persons").innerHTML= node;

});

}

</script>

</head>

<body>

<selectid="dep">

<optionvalue="1">普通组</option>

<optionvalue="2">明星组</option>

<optionvalue="3">西游组</option>

</select>

<divid="persons"></div>

</body>

</html>

第一个参数是URL，第二个参数可选，如果有数据可以以json的形式传递数据，但是get方法中也可以在URL后面拼接，post就只能第二个参数传递了，第三个参数是回调函数，第四个参数表示以什么形式的数据接收数据，数据类型。

jQuery中ajax的方法最常用的就是ajax、get、post这三个方法，希望大家好好的使用，熟练掌握。

Jsonp

前面我们学习了ajax的相关知识，大家都感觉ajax相当好用，但是ajax存在了一个很大的问题，就是ajax无法跨域访问。

如我们存在两个项目：jsonp01和jsonp02，我们在jsonp01的页面中调用如下代码：

$(function(){

$("#content").load("http://127.0.0.1:8080/jsonp02/a.html");

});

当然jsonp02中是存在a.html页面的：

但是当我们运行页面的时候，发现无法使用ajax的load方法加载：

提示我们是ajax无法跨域取数据，因为我们在这里使用了IP地址访问，此时默认是跨域访问的（注意：这种方式在程序界很常见的，我们要经常跨域取访问数据的）。

Jsonp的原理

虽然ajax无法跨域，但是javascript却是可以跨域访问的，所以一些天才程序员利用javascript跨域访问的方式将要调用的函数传递到了服务器端，由服务器端拼接成javascript代码，再写回到客户端完成调用，这种方式就叫做jsonp。

做个案例看看：

<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">

<title>Insert title here</title>

<scripttype="text/javascript"src="js/jquery-1.11.1.js"></script>

<scripttype="text/javascript">

//在jsonp01中定义一个函数show

functionshow(msg) {

alert(msg);

}

</script>

<scripttype="text/javascript"src="http://127.0.0.1:8080/jsonp02/a.js"></script>

</head>

<body>

<divid="content"></div>

</body>

</html>

我们在jsonp01的页面上写了一个函数，但是没有调用它，之后我们跨域导入了jsonp02的一个脚本，脚本这样写：

show("hello jsonp");

运行页面：

我们发现a.js脚本的代码运行了，说明javascript的确支持跨域，所以一些天才程序员利用javascript跨域访问的方式将要调用的函数传递到了服务器端，由服务器端拼接成javascript代码，再写回到客户端完成调用，这种方式就叫做jsonp。

下面我们就以一个案例来说明：

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">

<title>Insert title here</title>

<scripttype="text/javascript"src="js/jquery-1.11.1.js"></script>

<scripttype="text/javascript">

//在jsonp01中定义一个函数show

functionshow(msg) {

alert(msg.name);

}

</script>

<!--

利用javascript跨域的特性，将要调用函数传递到服务器端，

有服务器端拼接为调用的函数，再返回客户端执行

-->

<scripttype="text/javascript"src="http://127.0.0.1:8080/jsonp02/json.do?callback=show&did=1"></script>

</head>

<body>

<divid="content"></div>

</body>

</html>

在客户端使用参数传递的方式，将方法名称传递过去，在服务器端完成拼接：

String call =request.getParameter("callback");

System.out.println(call);//得到页面传递过来的方法名称

String str =call+"("+px.toString()+")";//拼接为方法调用

再讲拼接完成的字符串写回到客户端，这样客户端就可以得到执行这段脚本：

jQuery的jsonp的实现

这样就完成了跨域的访问了，基于这种情况，jQuery为我们提供了使用getJSON方法或者使用其他jQuery中ajax方法（其他的就需要说明类型为jsonp）来完成ajax的跨域：

我们就完成不用管这个函数名称了，jQuery会自动的生成一个随机不重复的方法名称，我们只要关系调用得到的数据问题就行了，如：

<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">

<title>Insert title here</title>

<scripttype="text/javascript"src="js/jquery-1.11.1.js"></script>

<scripttype="text/javascript">

//我们不用关心callback所对应的方法名称了

//jQuery会自动生成一个不会重复的随机函数名称

//这个函数在服务器端拼接后，会在getJSON的第二个参数

//就是这个回调函数，如下面：

$.getJSON("http://127.0.0.1:8080/jsonp02/json.do?callback=?&did=1",function(date){

alert(date.name);

});

</script>

</head>

<body>

<divid="content"></div>

</body>

</html>

调用得到结果：

在jQuery中，除了getJSON方法外，其他的ajax方法也可以实现jsonp，在数据类型中加入jsonp就行了，如：

$.ajax({

type:"POST",

url:"http://127.0.0.1:8080/jsonp02/json.do",

data:{"did":1},

dataType:"jsonp",//类型必须写错jsonp

jsonp:"callback",//注意，这个可以不写，默认就是callback，如果写了服务器端必须一致

success: function(data) {

alert(data.name)

}

});

注意：ajax和jsonp和json的区别：

Ajax是就要XMLHttpRequest对象实现的一种可以异步访问服务器的技术

Jsonp是一种使用JSON数据的方式，返回的不是JSON对象，是包含JSON对象的javaScript脚本，辅助ajax实现跨越的技术（ajax本身无法跨越取数据）。

Json则是一种轻量级的数据交换格式，像xml一样，是用来描述数据间的关系，javascript默认是对象。

附录

http请求状态码：

status 返回当前请求的http状态码

status属性返回当前请求的http状态码,此属性仅当数据发送并接收完毕后才可获取。完整的HTTP状态码如下:

100 Continue 初始的请求已经接受，客户应当继续发送请求的其余部分

101 Switching Protocols 服务器将遵从客户的请求转换到另外一种协议

200 OK 一切正常，对GET和POST请求的应答文档跟在后面。

201 Created 服务器已经创建了文档，Location头给出了它的URL。

202 Accepted 已经接受请求，但处理尚未完成。

203 Non-Authoritative Information 文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝

204 No Content 没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的

205 Reset Content 没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容

206 Partial Content 客户发送了一个带有Range头的GET请求，服务器完成了它

300 Multiple Choices 客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。

301 Moved Permanently 客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。

302 Found 类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。

303 See Other 类似于301/302，不同之处在于，如果原来的请求是POST，Location头指定的重定向目标文档应该通过GET提取

304 Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。

305 Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取

307 Temporary Redirect 和302（Found）相同。许多浏览器会错误地响应302应答进行重定向，即使原来的请求是POST，即使它实际上只能在POST请求的应答是303时才能重定向。由于这个原因，HTTP 1.1新增了307，以便更加清除地区分几个状态代码：当出现303应答时，浏览器可以跟随重定向的GET和POST请求；如果是307应答，则浏览器只能跟随对GET请求的重定向。