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编译器上报红叉，运行结果异常
