博客

JavaWeb – Ajax

  • Post author:
  • Post category:java


Ajax讲解

1.ajax是什么？

asynchronous javascript and xml：一部的js和xml

它能使js访问服务器，而且是异步访问

服务器给客户端的响应一般是整个页面，一个html完整页面！但在ajax中因为是局部刷新，那么服务器就不用再响应整个页面，而只是数据

  • text：纯文本
  • xml：
  • json：它是js提供的数据交互格式，它在ajax中最受欢迎

2.异步交互和同步交互

  • 同步

    • 发一个请求，就要等待服务器的响应结束，然后才能发第二个请求，中间这段时间就是一个字“卡”
    • 刷新的是整个页面
  • 异步

    • 发一个请求后，无序等待服务器的响应，然后就可以发第二个请求
    • 可以使用js接收服务器的响应，然后使用js来局部刷新

3.ajax应用场景

  • 百度的搜索框
  • 用户注册时（校验用户名是否被注册过）

4.ajax的优缺点

  • 优点：

    • 异步交互：增强了用户的体验
    • 性能：因为服务器无需再响应整个页面，只需要响应部分内容，所以服务器的压力减轻了
  • 缺点：

    • ajax不能应用在所有场景
    • ajax无端的增多了对服务器的访问次数，给服务器带来了压力

5.ajax发送异步请求（四步操作）


1.第一步

  • ajax其实只需要学习一个对象：XMLHttpRequest，如果掌握了它，就掌握了ajax

  • 得到XMLHttpRequest

    大多数浏览器都支持：var xmlHttp = new XMLHttpRequest();

    IE6.0：var xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);

    IE5.5以及更早版本的IE：var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);

  • 编写创建XMLHttpRequest对象的函数 

function creatXMLHttpRequest(){
    try {
        return new XMLHttpRequest();
    } catch(e) {
        try{
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e){
            try {
                return new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e){
                alert("您用的是什么浏览器啊？");
                throw e;
            }
        }
    }
}


2.第二步（打开与服务器的连接）

  • xmlHttp.open()：用来打开与服务器的连接，它需要三个参数：

    请求方式：可以是GET或POST

    请求的URL：指定服务器端资源，例如：/day23_1/AServlet

    请求是否为异步：如果为true表示发送异步请求，否则同步请求

  • xmlHttp.open(“GET”, “/day23_1/AServlet”, true);


3.第三步（发送请求）

  • xmlHttp.send(null)：如果不给可能会造成部分浏览器无法发送

    参数：就是请求体内容！如果是GET请求，必须给出null


4.第四步（）

  • 在xmlHttp对象的一个事件上注册监听器：onreadystatechange
  • xmlHttp对象一共有5个状态：

    • 0状态：刚创建，还没有调用open()方法；
    • 1状态：请求开始，调用了open()方法，但还没有调用send()方法
    • 2状态：调用完了send()方法
    • 3状态：服务器已经开始响应，但不表示响应结束了
    • 4状态：服务器响应结束（通常我们只关心这个状态）
  • 得到xmlHttp对象的状态

    var state = xmlHttp.readyState;//可能是0、1、2、3、4
  • 得到服务器响应的状态码

    var status = xmlHttp.status;//例如200、404、500
  • 得到服务器响应的内容

    • var content = xmlHttp.responseText;//得到服务器的响应的文本格式的内容
    • var content = xmlHttp.responseXML;//叨叨服务器的响应的xml响应的内容，xmlHttp对象会自动对响应的字符串进行解析，它是Document

示意代码：


双重判断
 

xmlHttp.onreadystatechange = function(){//xmlHttp的5种状态都会调用本方法
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200){//双重判断：判断是否为4状态，而且还要判断是否为200
        //获取服务器的响应内容
        var text = xmlHttp.responseText;
    }
}

Ajax练习

第一例：Ajax的HelloWorld

Servlet: 

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        System.out.println("Hello xiaohei");
        response.getWriter().print("Hello xiaohei");
    }

JSP: 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script>
//创建异步对象
function creatXMLHttpRequest(){
    try {
        return new XMLHttpRequest();
    } catch (e) {
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                return new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("您用的是什么浏览器啊？");
                throw e;
            }
        }
    }
}

window.onload = function(){//文档加载完毕后执行
    var but = document.getElementById("but");
    but.onclick = function(){//给按钮的点击事件注册监听


        //ajax四步操作
        //1.得到异步对象
        var xmlHttp = creatXMLHttpRequest();
        //2.打开数据库连接，这里是在jsp页面中使用标签，客户端看到jsp页面的时候是服务端tomcat把jsp页面变成html页面才发送过来的，到客户端就没有jsp标签了，已经变成字符串"/day23_1_itcast/AServlet"
        xmlHttp.open("GET","<c:url value='/AServlet'/>", true);
        //3.发送请求
        xmlHttp.send(null);//GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送
        //4.给异步对象的onreadystatechange注册监听器
        xmlHttp.onreadystatechange = function(){//当xmlHttp的状态发生变化时执行
            //双重判断      
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                var h4 = document.getElementById("h4");
                var text = xmlHttp.responseText;
                h4.innerHTML = text;
            }
        }
    }
}
</script>
</head>
<body>
    <button id="but">点击这里</button>
    <h4 id="h4"></h4>
</body>

第二例：发送POST请求（如果发送请求时需要带有参数，一般都用POST请求）

  • open：xmlHttp.open(“POST”…)
  • 添加一步：设置Content-Type请求头：

    xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
  • send：xmlHttp.send(“username=zhangsan&password=123”);发送请求时指定请求体

    Servlet： 
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");

        String username = request.getParameter("username");
        System.out.println("(Post)...Hello xiaohei" + username);
        response.getWriter().print("(Post：)...Hello xiaohei" + username);
    }

JSP： 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script>
function creatXMLHttpRequest(){
    try {
        return new XMLHttpRequest();
    } catch (e) {
        try {
            return ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                return ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("您用的是什么浏览器啊？");
                throw e;
            }
        }
    }
}

window.onload = function(){
    var but = document.getElementById("but");
    but.onclick = function(){

        //ajax四步操作
        //1.得到异步对象
        var xmlHttp = creatXMLHttpRequest();
        //2.打开数据库连接
        /********修改open方法，指定请求方式为POST**********/
        xmlHttp.open("POST","<c:url value='/AServlet'/>", true);
        /*********设置请求头：Content-Type*********/
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        //3.发送请求
        /*********发送时指定请求体*********/
        xmlHttp.send("username=张三");
        //4.给异步对象的onreadystatechange注册监听器
        xmlHttp.onreadystatechange = function(){

            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
            var h4 = document.getElementById("h4");
            var text = xmlHttp.responseText;
            h4.innerHTML = text;
            }
        }
    }
}
</script>
</head>
<body>
    <button id="but">点击这里</button>
    <h4 id="h4"></h4>
</body>
</html>

第三例：用户名是否已被注册

Servlet： 

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");

        String username = request.getParameter("username");
        if(username.equalsIgnoreCase("itcast")){
            response.getWriter().print("1");
        }else{
            response.getWriter().print("0");
        }
    }

JSP： 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

function creatXMLHttpRequest(){

    try {
        return new XMLHttpRequest();
    } catch (e) {
        try {
            return ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                return ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("您用的是什么浏览器啊？");
                throw e;
            }
        }
    }
}

    window.onload = function(){
        //获取文本框，给它的失去焦点事件注册监听
        var nameele = document.getElementById("usernameele");
        nameele.onblur = function(){
            //1.得到异步对象
            var xmlHttp = creatXMLHttpRequest();
            //2.开启与服务器的连接
            xmlHttp.open("POST", "<c:url value='/ValidateUsernameServlet' />", true);
            //3.设置请求头：Content-Type
            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            //4.发送请求，给出请求体
            xmlHttp.send("username=" + nameele.value);
            //5.给xmlHttp的onreadystatechange事件注册监听
            xmlHttp.onreadystatechange = function(){
                //双重判断
                if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                    var text = xmlHttp.responseText;
                    var spanele = document.getElementById("errorspan");
                    if(text == "1"){
                        spanele.innerHTML = "该用户名已被注册";
                    } else {
                        spanele.innerHTML = "";
                    }

                }
            }
        };
    };

</script>
</head>
<body>
    <form action="" method="post">
        name：<input type="text" name="username" id="usernameele" /><span id="errorspan"></span><br/>
        password：<input type="password" name="password" /><br/>
        <input type="submit" value="Submit" />
    </form>
</body>

第四例：响应XML

如果服务端响应内容为xml数据：

  • 服务器端：设置响应头ContentType=“text/xml;charset=utf-8”
  • 客户端：var doc = xmlHttp.responseXML;//得到的是document对象

    Servlet： 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String xml = "<students>" +
                "<student number='ITCAST_1001'>" +
                "<name>zhangsan</name>" +
                "<age>18</age>" +
                "<sex>male</sex>" +
                "</student>" +
                "</students>";

        response.setContentType("text/xml);charset=UTF-8");
        response.getWriter().print(xml);

    }

JSP： 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script>
function creatXMLHttpRequest(){

    try {
        return new XMLHttpRequest();
    } catch (e) {
        try {
            return ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                return ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("您用的是什么浏览器啊？");
                throw e;
            }
        }
    }
}

window.onload = function(){ 
    var but = document.getElementById("but");
    but.onclick = function(){

        //ajax四步操作
        //1.得到异步对象
        var xmlHttp = creatXMLHttpRequest();
        //2.打开数据库连接
        xmlHttp.open("GET","<c:url value='/BServlet'/>", true);
        //3.发送请求
        xmlHttp.send(null);
        //4.给异步对象的onreadystatechange注册监听器
        xmlHttp.onreadystatechange = function(){

            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                //获取服务器响应结果（xml）
                var doc = xmlHttp.responseXML;
                var ele = doc.getElementsByTagName("student")[0];
                //获取元素名为number的属性值
                var number = ele.getAttribute("number");

                var name; 
                var age; 
                var sex;
                if(window.addEventListener){
                    name = ele.getElementsByTagName("name")[0].textContent;//其他浏览器
                } else{
                    name = ele.getElementsByTagName("name")[0].text;//IE浏览器
                }
                if(window.addEventListener){
                    age = ele.getElementsByTagName("age")[0].textContent;//其他浏览器
                } else{
                    age = ele.getElementsByTagName("age")[0].text;//IE浏览器
                }
                if(window.addEventListener){
                    sex = ele.getElementsByTagName("sex")[0].textContent;//其他浏览器
                } else{
                    sex = ele.getElementsByTagName("sex")[0].text;//IE浏览器
                }

                var text = number + "," + name + "," + age + "," + sex;
                var h4 = document.getElementById("h4");
                h4.innerHTML = text;
            }
        }
    }
}
</script>
</head>
<body>
    <button id="but">点击这里</button>
    <h4 id="h4"></h4>
</body>
</html>

JSON

JSON基础

1.json是什么？

它是js提供的一种数据交换格式

2.json语法

{ }：是对象，对象的属性名可以不用双引号括起来

但JSON的属性名必须使用双引号括起来，单引号不行

属性值可以是：null，数值，字符串，数组（使用[ ]括起来），boolean值（true和false）

3.应用json

var person = {“name”:”zhangsan”, “age”:18, “sex”:”male”};

服务端向客户端发送json串

String str = “{\”name\”:\”zhangsan\”, \”age\”:18, \”sex\”:\”male\”}”;

需要转义，为了能在字符串中正确的表示双引号，双引号是字符串内容的一部分

通常，我们在jsp页面中获取到服务器响应来的json串后，需要去执行它，就需要调用eval方法，然后在json串两边加上括号

var text = xmlHttp.responseText;

var person = eval(“(” + text + “)”);

json-lib

json-lib的核心jar包：json-lib.jar

json-lib的依赖jar包：

  • commons-lang.jar
  • commons-beanutils.jar
  • commons-logging.jar
  • commons-collections.jar
  • ezmorph.jar

核心类：

JSONObject：类似于Map

  • toString();返回一个JSON串
  • fromObject(Object arg);这是一个静态方法，可以把一个对象转成JSONObject类型

    JSONObject map = JSONObject.fromObject(person);

JSONArray：类似于List

  • toString();返回一个JSON串
    • fromObject(Object arg);

      JSONArray jsonArray = JSONObject.fromObject(list);把一个List转换成JSONArray


版权声明：本文为Hello_Bottle原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
Tags: