ajax之helloWorld
myjsp.jsp
<%@ page language=@H_301_7@"java" import=@H_301_7@"java.util.*" pageEncoding=@H_301_7@"utf-8"%>
<% String path = request.getContextPath(); String basePath = request.getScheme()+@H_301_7@"://"+request.getServerName()+@H_301_7@":"+request.getServerPort()+path+@H_301_7@"/"; %>
<html>
<head>
<script type="text/javascript"> window.onload = function(){ // 获取a节点，添加响应函数 document.getElementsByTagName(@H_301_7@"a")[0].onclick = function(){ // 创建一个XMLHttpRequest对象 var request = new XMLHttpRequest(); // 准备发送请求的url，及其发送方式(多用时间戳) var url = this.href+@H_301_7@"?time"+new Date(); var method = @H_301_7@"POST"; // 调用对象的open方法 request.open(method,url); //如果需要post则需要下面这行告诉符合编码方式 request.setRequestHeader(@H_301_7@"ContentType",@H_301_7@"application/x-www-form-urlencoded"); // 调用send方法 request.send(@H_301_7@"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(@H_301_7@"a"); for(var i = 0;i < aNodes.length;i++){ aNodes[i].onclick = function(){ var request = new XMLHttpRequest(); var method = @H_301_7@"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(@H_301_7@"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(@H_301_7@"a"); for(var i = 0;i < aNodes.length;i++){ aNodes[i].onclick = function(){ var request = new XMLHttpRequest(); var method = @H_301_7@"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(@H_301_7@"name")[0].firstChild.nodeValue; var website = result.getElementsByTagName(@H_301_7@"website")[0].firstChild.nodeValue; var email = result.getElementsByTagName(@H_301_7@"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(@H_301_7@"a"); aNode.appendChild(document.createTextNode(name)); aNode.href = @H_301_7@"mailto" + email; var h2Node = document.createElement(@H_301_7@"h2"); h2Node.appendChild(aNode); var aNode2 = document.createElement(@H_301_7@"a"); aNode2.appendChild(document.createTextNode(website)); aNode2.href = website; var detailsNode = document.getElementById(@H_301_7@"details"); detailsNode.innerHTML = @H_301_7@"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 = { @H_301_7@"name":@H_301_7@"atguigu",@H_301_7@"age":@H_301_7@"12",@H_301_7@"address":{@H_301_7@"city":@H_301_7@"BeiJing",@H_301_7@"school":@H_301_7@"尚硅谷"},@H_301_7@"teaching":function(){ alert(@H_301_7@"javaee,android"); } }; alert(jsonObject.name); alert(jsonObject.address.city); jsonObject.teaching(); //eval可以把一个字符串转为js代码来执行 var testStr = @H_301_7@"alert('hello eval')"; eval(testStr); //json字符串转为对象 var jsonStr = @H_301_7@"{'name':'atguigu'}"; var testObject = eval(@H_301_7@"("+jsonStr+@H_301_7@")"); alert(testObject.name); </script>
</head>
<body>
</body>
</html>
gson数据交互格式
andy.js
{"person":{ "name":@H_301_7@"Andy Buddddd","website":@H_301_7@"http://andybudd.com/","email":@H_301_7@"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(@H_301_7@"a"); for(var i = 0;i < aNodes.length;i++){ aNodes[i].onclick = function(){ var request = new XMLHttpRequest(); var method = @H_301_7@"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(@H_301_7@"(" + result + @H_301_7@")"); 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(@H_301_7@"a"); aNode.appendChild(document.createTextNode(name)); aNode.href = @H_301_7@"mailto" + email; var h2Node = document.createElement(@H_301_7@"h2"); h2Node.appendChild(aNode); var aNode2 = document.createElement(@H_301_7@"a"); aNode2.appendChild(document.createTextNode(website)); aNode2.href = website; var detailsNode = document.getElementById(@H_301_7@"details"); detailsNode.innerHTML = @H_301_7@""; 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编译器上报红叉，运行结果异常
