标签：name innerHTML 响应 ajax var showdiv
概念
ajax全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。局部刷新技术。不是一门新技术，是多种技术的组合。是浏览器端的技术。
作用
实现在当前结果页中显示其他请求的响应内容
ajax的状态码(readyState)
0 表示XMLHttpRequest已建立，但还未初始化，这时尚未调用open方法
1 表示open方法已经调用，但未调用send方法（已创建，未发送）
2 表示send方法已经调用，其他数据未知
3 表示请求已经成功发送，正在接受数据
4 表示数据已经成功接收。
响应状态码(status)
200：请求成功
404：请求资源未找到
500：内部服务器错误
使用
ajax的基本流程
1）创建ajax引擎对象
2）复写onreadystatement函数
3）判断ajax状态码
4）判断响应状态码
5）获取响应内容(响应内容的格式)
普通字符串：responseText
json(重点)：responseText
其实就是将数据按照json的格式拼接好的字符串，方便使用eval方法
将接收的字符串数据直接转换为js的对象
json格式：
var 对象名={
属性名:属性值,
属性名:属性值,
……
}
XML数据：responseXML.返回document对象
通过document对象将数据从xml中获取出来
6）处理响应内容(js操作文档结构)
7）发送请求
get请求
get的请求实体拼接在URL后面，？隔开，键值对
ajax.open("get","url");
ajax.send(null);
post请求
有单独的请求实体
ajax.open("post", "url");
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("name=张三&pwd=123");
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!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>
<!-- 声明js代码域 -->
<script type="text/javascript">
function getData(){
//创建ajax引擎对象
var ajax;
if(window.XMLHttpRequest){//火狐
ajax=new XMLHttpRequest();
}else if(window.ActiveXObject){//IE
ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
//复写onreadystatement函数
ajax.onreadystatechange=function(){
//判断Ajax状态吗
if(ajax.readyState==4){
//判断响应状态吗
if(ajax.status==200){
//获取响应内容
var result=ajax.responseText;
//处理响应内容
//获取元素对象
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML=result;
}else if(ajax.status==404){
//获取元素对象
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML="请求资源不存在";
}else if(ajax.status==500){
//获取元素对象
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML="服务器繁忙";
}
}else{
//获取元素对象
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML="<img src='img/2.gif' width='200px' height='100px'/>";
}
}
//发送请求
//get方式:请求实体拼接在URL后面
ajax.open("get","ajax?"+data);
ajax.send(null);
//post方式：请求实体需要单独的发送
ajax.open("post", "ajax");
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("name=张三&pwd=123");
}
</script>
<style type="text/css">
#showdiv{
border:solid 1px;
width:200px;
height:100px;
}
</style>
</head>
<body>
<h3>欢迎登录403峡谷</h3>
<hr>
<input type="button" value="测试 " onclick="getData()"/>
<div id="showdiv"></div>
</body>
</html>
ajax的异步和同步
ajax.open(method,urL,async)
async：设置同步代码执行还是异步代码执行
true代表异步，默认是异步
false代表同步
例：ajax.open("get","ajax",true);
json格式获取响应内容
responseText
其实就是将数据按照json的格式拼接好的字符串，方便使用eval方法
将接收的字符串数据直接转换为js的对象
json格式：
var 对象名={
属性名:属性值,
属性名:属性值,
……
}
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!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>
<!--
需求分析：
1、在当前页面内显示查询结果，考虑使用ajax
2、创建ajax函数
3、调用ajax函数发送请求到UserServlet
4、调用业务层获取对应的数据
-->
<!-- 声明js代码域 -->
<script type="text/javascript" src="js/ajaxUtil.js"></script>
<script type="text/javascript">
//获取数据
function getData(){
//获取用户请求信息
var name=document.getElementById("uname").value;
//创建ajax引擎对象
var ajax;
if(window.XMLHttpRequest){
ajax=new XMLHttpRequest();
}else if(window.ActiveXObject){
ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
//复写onreadystatechange
ajax.onreadystatechange=function(){
//判断ajax状态码
if(ajax.readyState==4){
//判断响应状态码
if(ajax.status==200){
//获取响应数据
var result=ajax.responseText;
//eval("var obj="+result);
//alert(obj.name);
eval("var u="+result);
alert(result);
//处理响应数据
//获取table表格对象
var ta=document.getElementById("ta");
ta.innerHTML="";
var tr=ta.insertRow(0);
var cell0=tr.insertCell(0);
cell0.innerHTML="编号";
var cell1=tr.insertCell(1);
cell1.innerHTML="名称";
var cell2=tr.insertCell(2);
cell2.innerHTML="价格";
var cell3=tr.insertCell(3);
cell3.innerHTML="位置";
var cell4=tr.insertCell(4);
cell4.innerHTML="描述";
//插入新的行
var tr=ta.insertRow(1);
var cell0=tr.insertCell(0);
cell0.innerHTML=u.uid;
var cell1=tr.insertCell(1);
cell1.innerHTML=u.uname;
var cell2=tr.insertCell(2);
cell2.innerHTML=u.price;
var cell3=tr.insertCell(3);
cell3.innerHTML=u.loc;
var cell4=tr.insertCell(4);
cell4.innerHTML=u.desc;
}
}
}
//发送请求
ajax.open("get","user?name="+name);
ajax.send(null);
}
</script>
</head>
<body>
<h3>欢迎访问英雄商店</h3>
<hr>
英雄名称：<input type="text" name="uname" value="" id="uname"/>
<input type="button" value="搜索" onclick="getData2()">
<hr>
<table border="1px" id="ta">
</table>
</body>
</html>
在UserServlet中：
1 public class UserServlet extends HttpServlet{
2 @Override
3 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
4 //设置请求编码格式
5 req.setCharacterEncoding("utf-8");
6 //设置响应编码格式
7 resp.setCharacterEncoding("utf-8");
8 resp.setContentType("text/xml;charset=utf-8");
9 //获取请求信息
10 String name=req.getParameter("name");
11 System.out.println("用户请求信息为："+name);
12 //处理请求信息
13 //获取业务层对象
14 UserSrevice us=new UserSeviceImp();
15 //处理业务
16 User u=us.getUserInfoService(name);
17 System.out.println("查询结果为:"+u);
18 //响应处理结果
19 //resp.getWriter().write("{name:'"+u.getUname()+"',pwd:'"+u.getPwd()+"'}");
20 resp.getWriter().write(new Gson().toJson(u));
21 }
22 }
在servlet中响应结果返回中：
resp.getWriter().write("{name:'"+u.getUname()+"',pwd:'"+u.getPwd()+"'}");
此方式拼接字符串太麻烦，推荐安装jar包：gson-2.2.4.jar
resp.getWriter().write(new Gson().toJson(u));
XML数据格式获取响应内容
responseXML：返回document对象
通过document对象将数据从xml中获取出来
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!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">
<script type="text/javascript">
function getXML(){
//创建ajax引擎对象
var ajax;
if(window.XMLHttpRequest){//火狐
ajax=new XMLHttpRequest();
}else if(window.ActiveXObject){//ie
ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
//复写onreadystatechange
ajax.onreadystatechange=function(){
//判断Ajax状态吗
if(ajax.readyState==4){
//判断响应状态吗
if(ajax.status==200){
//获取响应内容
var doc=ajax.responseXML;
//处理响应内容
//获取元素对象
alert(doc.getElementsByTagName("name")[0].innerHTML);
}
}
}
//发送请求
ajax.open("get","xml.jsp",true);
ajax.send(null);
}
</script>
</head>
<body>
<h3>XML数据格式学习</h3>
<hr>
<input type="button" value="测试XML" onclick="getXML()" />
</body>
</html>
在xml.jsp中：
<%@ page language="java" contentType="text/xml; charset=utf-8"%>
<user>
<name>李四</name>
<pwd>123</pwd>
</user>
相当于在Servlet中响应xml格式信息：
//响应处理结果
resp.getWriter().write("<user><uid>1</uid><name>张三</name><price>11.11</price></user>");
标签：name,innerHTML,响应,ajax,var,showdiv 来源： https://www.cnblogs.com/sunny-sml/p/12587790.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。