Ajax解析html、xml、json、js原生方式、jquery方式
2017-03-16 00:27
981 查看
ajax之helloWorld
myjsp.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<script type="text/javascript">
window.onload = function(){
// 获取a节点，添加响应函数
document.getElementsByTagName("a")[0].onclick = function(){
// 创建一个XMLHttpRequest对象
var request = new XMLHttpRequest();
// 准备发送请求的url，及其发送方式(多用时间戳)
var url = this.href+"?time"+new Date();
var method = "POST";
// 调用对象的open方法
request.open(method,url);
//如果需要post则需要下面这行告诉符合编码方式
request.setRequestHeader("ContentType","application/x-www-form-urlencoded");
// 调用send方法
request.send("name='atguigu'"); // 对对象添加响应函数-该函数由服务器触发，不是用户触发，通知客户端当前的通讯状态
request.onreadystatechange = function(){
// 判断响应是否完成
if(request.readyState == 4){
// 判断响应是否可用
if(request.status == 200 || request.status == 304){
// 打印响应结果
alert(request.responseText);
}
}
}
// 取消a节点的默认行为
return false;
}
}
</script>
</head>
<body>
<a href="helloAjax.txt">HelloAjax</a>
</body>
</html>不通过超链接的方式获取文本，而是通过打印的方式获取—这个案例手敲代码
html数据交互格式
andy.html<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2> <a href="http://andybudd.com/">http://andybudd.com/</a> </body> </html>
myjsp.jsp
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function(){
var aNodes = document.getElementsByTagName("a");
for(var i = 0;i < aNodes.length;i++){
aNodes[i].onclick = function(){
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href;
request.open(method,url);
request.send(null);
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200 || request.status == 304){
document.getElementById("details").innerHTML = request.responseText;
}
}
}
return false;
}
}
}
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li>
<a href="andy.html">Andy</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>
xml数据交互格式
andy.xml<?xml version="1.0" encoding="utf-8"?> <details> <name>Andy Budd</name> <website>http://andybudd.com/</website> <email>andy@clearleft.com</email> </details>
myjsp.jsp
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function(){
var aNodes = document.getElementsByTagName("a");
for(var i = 0;i < aNodes.length;i++){
aNodes[i].onclick = function(){
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href;
request.open(method,url);
request.send(null);
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200 || request.status == 304){
var result = request.responseXML;
var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;
alert(name);
alert(website);
alert(email);
/**
<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
<a href="http://andybudd.com/">http://andybudd.com/</a>
*/
var aNode = document.createElement("a");
aNode.appendChild(document.createTextNode(name));
aNode.href = "mailto" + email;
var h2Node = document.createElement("h2");
h2Node.appendChild(aNode);
var aNode2 = document.createElement("a");
aNode2.appendChild(document.createTextNode(website));
aNode2.href = website;
var detailsNode = document.getElementById("details");
detailsNode.innerHTML = "sss";
detailsNode.appendChild(h2Node);
detailsNode.appendChild(aNode2);
}
}
}
return false;
}
}
}
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li>
<a href="andy.xml">Andy</a>
</li>
<li>
<a href="richard.xml">Richard</a>
</li>
<li>
<a href="jeremy.xml">Jeremy</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>
gson字符串转为对象
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var jsonObject = {
"name":"atguigu",
"age":"12",
"address":{"city":"BeiJing","school":"尚硅谷"},
"teaching":function(){
alert("javaee,android");
}
};
alert(jsonObject.name);
alert(jsonObject.address.city);
jsonObject.teaching();
//eval可以把一个字符串转为js代码来执行
var testStr = "alert('hello eval')";
eval(testStr);
//json字符串转为对象
var jsonStr = "{'name':'atguigu'}";
var testObject = eval("("+jsonStr+")");
alert(testObject.name);
</script>
</head>
<body>
</body>
</html>gson数据交互格式
andy.js{"person":{
"name":"Andy Buddddd",
"website":"http://andybudd.com/",
"email":"andy@clearleft.com"}
}myjsp.jsp
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function(){
var aNodes = document.getElementsByTagName("a");
for(var i = 0;i < aNodes.length;i++){
aNodes[i].onclick = function(){
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href;
request.open(method,url);
request.send(null);
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200 || request.status == 304){
var result = request.responseText;
var object = eval("(" + result + ")");
var name = object.person.name;
var website = object.person.website;
var email = object.person.email;
alert(name);
alert(website);
alert(email);
var aNode = document.createElement("a");
aNode.appendChild(document.createTextNode(name));
aNode.href = "mailto" + email;
var h2Node = document.createElement("h2");
h2Node.appendChild(aNode);
var aNode2 = document.createElement("a");
aNode2.appendChild(document.createTextNode(website));
aNode2.href = website;
var detailsNode = document.getElementById("details");
detailsNode.innerHTML = "";
detailsNode.appendChild(h2Node);
detailsNode.appendChild(aNode2);
}
}
}
return false;
}
}
}
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li>
<a href="andy.js">Andy</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>提示：andy.js在javaee编译器上报红叉，运行结果异常
js原生同步、异步
function fn1(){
//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
var xmlHttp = new XMLHttpRequest();
//2、绑定监听 ---- 监听服务器是否已经返回相应数据
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//5、接受相应数据
var res = xmlHttp.responseText;
document.getElementById("span1").innerHTML = res;
}
}
//3、绑定地址
xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);
//4、发送请求
xmlHttp.send();
}
function fn2(){
//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
var xmlHttp = new XMLHttpRequest();
//2、绑定监听 ---- 监听服务器是否已经返回相应数据
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//5、接受相应数据
var res = xmlHttp.responseText;
document.getElementById("span2").innerHTML = res;
}
}
//3、绑定地址
xmlHttp.open("POST","/WEB22/ajaxServlet",false);
//4、发送请求
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("name=wangwu");
}servlet代码如下：
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String parameter = request.getParameter("name");
response.getWriter().write(Math.random()+parameter);
}query的get、post、ajax方法
function fn1(){
//get异步访问
$.get(
"/WEB22/ajaxServlet2", //url地址
{"name":"张三","age":25}, //请求参数
function(data){ //执行成功后的回调函数
//{\"name\":\"tom\",\"age\":21}
alert(data.name);
},
"json"
);
}
function fn2(){
//post异步访问
$.post(
"/WEB22/ajaxServlet2", //url地址
{"name":"李四","age":25}, //请求参数
function(data){ //执行成功后的回调函数
alert(data.name);
},
"json"
);
}
function fn3(){
$.ajax({
url:"/WEB22/ajaxServlet2",
async:true,
type:"POST",
data:{"name":"lucy","age":18},
success:function(data){
alert(data.name);
},
error:function(){
alert("请求失败");
},
dataType:"json"
});
}servlet代码如下：
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println(name+" "+age);
//java代码只能返回一个json格式的字符串
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("{\"name\":\"汤姆\",\"age\":21}");
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AJAX 原生js以及Jquery解析html,xml,txt,json格式文本
- 通过AJAX的JS、JQuery两种方式解析XML
- 通过AJAX的JS、JQuery两种方式解析XML示例介绍
- 通过AJAX的JS、JQuery两种方式解析XML示例介绍
- JQuery解析HTML、JSON和XML实例详解
- Ajax——jquery快速实现html、json、xml的ajax应用
- Ajax请求Servlet返回文本 json html和XML数据并解析xml及responseText和responseXML的区别
- 原生js方式实现ajax，并仿jquery方式简单调用
- js 无参数、有参数的webservice通信方法 XMLHttpRequest和 $.ajax方式汇总及返回值为json问题
- JQuery解析xml的两种方式$.get和$.ajax
- JQuery解析HTML、JSON和XML实例详解
- jquery json xml关于解析两次json数据动态取值的处理方式
- JQuery解析xml的两种方式$.get和$.ajax
- S2SH+ajax+json-----jQuery中$.ajax解析xml、json格式数据
- jquery通过ajax方式获取json数据和解析
- Jquery 解析 JSON html js 双引号 的问题
- 用原生js,json解析ajax传回来的数据
- Ajax与jQuery-利用$.get()和$.post()方法传递html,xml,json数据
- jetbrick-webmvc 支持多种方式返回一个JSON (xml, html, js类似)
- 使用JQuery的Ajax操作html，xml，json数据