ajax

概念

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中:

public class UserServlet extends HttpServlet{
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求编码格式
        req.setCharacterEncoding("utf-8");
        //设置响应编码格式
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/xml;charset=utf-8");
        //获取请求信息
        String name=req.getParameter("name");
        System.out.println("用户请求信息为:"+name);
        //处理请求信息
            //获取业务层对象
            UserSrevice us=new UserSeviceImp();
            //处理业务
            User u=us.getUserInfoService(name);
            System.out.println("查询结果为:"+u);
        //响应处理结果
            //resp.getWriter().write("{name:‘"+u.getUname()+"‘,pwd:‘"+u.getPwd()+"‘}");
            resp.getWriter().write(new Gson().toJson(u));
    }
}

在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>");

相关推荐