Ajax入门学习

来源：互联网发布：js中怎么隐藏div 编辑：程序博客网时间：2024/06/05 18:48

一、概述

ajax：客户端（特指PC浏览器）与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术。注意：ajax不是新的编程语言，而是Google在2005年新推出的新的编程模式。

二、异步对象

1.XMLHttpRequest(非IE浏览器)

E5时，微软就开发出了第一个异步通讯对象，叫ActiveXObject对象，
Firefox等其它浏览器厂商也慢慢引入异步通讯对象，叫XMLHttpRequest对象，
IE的高版本，也将这个异步对象取名叫XMLHttpRequest对象

2.ActiveXObject(IE浏览器)

IE有向下兼容问题，因此可以使用ActiveXObject对象。

3.使用异步对象

使用异步对象无需jar包，现代中高版本浏览器中内置了这个异步通讯对象，只需通过JavaScript就可以创建。不过虽然浏览器内置了ajax对象，但是并没有创建出来，需要我们自己使用JavaScript创建出来，代码如下：

function createAjax(){    var ajax = null ;    try{        ajax = new ActiveXObject("Microsoft.xmlhttp");    }catch(e1){        try{            ajax = new XMLHttpRequest() ;        }catch(e2){            alert("please change browser");        }    }    return ajax; }

三、异步对象的使用步骤

1.GET请求

1.创建异步对象

调用上面的js方法创建ajax对象

//1.创建ajax对象(状态1) var ajax = createAJAX() ;

2.准备发送请求，但是还没有真正发送请求

此时设置请求方式和url

//2.准备发请求 var method = "get" ;//请求方式var url = {pageContext.request.contextPath}/servlet/TimeServlet"; //请求urlajax.open(method,url);//(状态2)

3.真正发送请求

这里举例使用的是get请求，请求没有实体，顾设置为null

//3.真正发请求(这里的参数是请求体中的内容,由于是get请求,请求体为空,所有赋值为null)ajax.send(null);

4.ajax不断监听服务端的响应

ajax.readyState == 4 说明从服务端获取到了数据，响应码为200，说明正常

ajax.onreadystatechange = function(){  //如果状态码是4的话,表示ajax对象已经从服务器端带回信息回到了前台    if(ajax.readyState == 4 ){        if(ajax.status == 200 ){            var nowStr = ajax.responseText ;            alert(nowStr);        }    }}

这里的服务端代码如下：

public class TimeServlet extends HttpServlet {    public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        request.setCharacterEncoding("utf-8");        //注意:这行代码是告诉浏览器端服务器是以什么格式的数据返回的(必须要)        response.setContentType("text/html;charset=utf-8");        PrintWriter out = response.getWriter();        System.out.println("TimeServlet.doGet()");        //1.获取当前时间        Date date = new Date();        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");        String time = sdf.format(date);        //2.以流的方式发送到jsp页面        PrintWriter writer = response.getWriter();        writer.write(time);        writer.flush();        writer.close(); //当流关闭之后,信息发送到前台    }    public void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        doGet(request, response);    }}

注意：上面返回给jsp的数据是以流的形式返回，不能以请求重定向或者请求转发的形式，否则还是刷新了界面。
完整前台代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">    <title>My JSP</title>  </head>  <body>    当前时间：<span id="time"></span><br/>    <input id="buttonID" type="button" value="获取当前时间"/><p/>    <script type="text/javascript">        //异步创建AJAX对象        function createAJAX(){            var ajax = null ;            try{                //如果是ie12的话                ajax = new ActiveXObject("microsoft.xmlhttp") ;            }catch(e1){                try{                    //如果是非ie的话                    ajax = new XMLHttpRequest() ;                }catch(e2){                    alert("你的浏览器中不支持异步对象，请换浏览器1");                }            }            return ajax;         }    </script>    <script type="text/javascript">        document.getElementById("buttonID").onclick = function(){            //1.创建ajax对象(状态1)            var ajax = createAJAX() ;            //2.准备发请求            var method = "get" ;//请求方式            var url = "${pageContext.request.contextPath}/servlet/TimeServlet"; //请求url            ajax.open(method,url);//(状态2)            //3.真正发请求(这里的参数是请求体中的内容,由于是get请求,请求体为空,所有赋值为null)            ajax.send(null);            //-------------------------------------等待            //4.ajax异步对象不断监听服务器响应的状态0-1-2-3-4            //为ajax对象设置状态改变时调用的方法            ajax.onreadystatechange = function(){                //如果状态码是4的话,表示ajax对象已经从服务器端带回信息回到了前台                if(ajax.readyState == 4 ){                    //如果响应码是200,说明正常                    if(ajax.status == 200 ){                        var nowStr = ajax.responseText ;                        alert(nowStr);                    }                }            }        } ;    </script>  </body></html>

这样，就完成了没有刷新整个页面就完成了动态获取当前时间。

2.POST请求

post请求方式和get方式大致步骤相同，主要不同的是第二步准备发送请求但是还么有真正发送时method改为post,然后在第三步真正发送时，send()方法的参数不可以为null，改为我们需要设置的参数(以键值对的形式)。例如：

var content = "username=" + username ;ajax.send(content);

注意：如果使用post请求，要在真正发送前加下面这行代码，它会将请求体中的汉字自动转换utf-8。

ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");

下面就POST请求做一个例子。
前台代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>My JSP</title>  </head>  <body>    用户名[POST]:<input id="usernameID" type="text" maxlength="4">    <span id="resID"></span>    <hr/>    <script type="text/javascript">        document.getElementById("usernameID").onblur = function(){            var username = this.value ;            alert(username);            //1            var ajax = createAjax() ;            //2            var method = "post" ;            var url = "${pageContext.request.contextPath}/servlet/UserServlet?time="+new Date().getTime();            ajax.open(method,url);            //设置ajax请求头为post,它会将请求体中的汉字自动转换utf-8            ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");            //3            var content = "username=" + username ;            ajax.send(content);            //-----------------------------------等待            ajax.onreadystatechange = function(){                if(ajax.readyState == 4 ){                    if(ajax.status == 200 ){                        var tip = ajax.responseText;                        //6创建img标签                        var imgElement = document.createElement("img");                        //设置img标签的属性                        imgElement.src = tip ;                        imgElement.style.height = "12px" ;                        imgElement.style.width = "12px" ;                        //定位span标签                        var spanElement = document.getElementById("resID");                        spanElement.innerHTML = "" ;//清空span标签的内容                        spanElement.appendChild(imgElement);                    }                }            }        }    </script>    <script type="text/javascript">        function createAjax(){            var ajax = null ;            try{                ajax = new ActiveXObject("microsoft.xmlhttp");            }catch(e1){                try{                    ajax = new XMLHttpRequest();                }catch(e2){                    alert("你的浏览器不支持ajax，请更换浏览器");                }            }            return ajax;         }    </script>  </body></html>

后台代码：

package com.itheima.web;import java.io.IOException;import java.io.PrintWriter;import java.util.Enumeration;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class UserServlet extends HttpServlet {    public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        request.setCharacterEncoding("utf-8");        response.setContentType("text/html;charset=utf-8");        PrintWriter out = response.getWriter();        Enumeration names = request.getParameterNames();        while(names.hasMoreElements()){            Object nextElement = names.nextElement();            System.out.println("name:" + nextElement);        }        String username = request.getParameter("username") ;        System.out.println("username"  + username );        String desc = "<font color = 'green'>输入正确</font>" ;        if(!"杰克".equals(username)){            desc = "<font color = 'red'>输入错误</font>" ;        }        //通过流将信息输出        PrintWriter pw = response.getWriter();        pw.write(desc);        pw.flush() ;        pw.close() ;    }    public void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        request.setCharacterEncoding("utf-8");        String username = request.getParameter("username") ;        String tip = "images/MsgError.gif" ;        System.out.println("username:" + username);         if("jack".equals(username)){            tip = "images/MsgSent.gif";        }        response.setContentType("text/html;charset=utf-8");        PrintWriter pw = response.getWriter();        pw.write(tip);        pw.flush();        pw.close();    }}

这里的图片是以字符串的形式在流中传输。

四、数据载体

1.三大载体

1.HTML

( A）优点：服务端响应的是普通html字符串，无需JS解析，配合innerHTML属性效率高
（B）缺点：如果需要更新WEB页面中的很多处地方，HTML不太方便，同时innerHTML属性不是DOM的标准，不能操作XML
注意：innerHTML在xml中不能使用，用firstChild.nodeValue替代
（C）适合：小量数据载体，且只更新在web页面中的一个地方

2.XML

（A）优点：是种通用的普通字符串格式，任何技术都能解析，标签名可以任意，使用DOM标准规则能够解析XML的任何部分
（B）缺点：XML文件格式相当严格，出错后，responseXML属性返回NULL，如果XML文件过长，导致解析效率低下
（C）适合：大量具有层次数据载体

3.JSON

JSON（Java Script Object Notation（记号,标记））是一种轻量级的数据交换语言, 以文本字符串为基础，且易于让人阅读。
JS可以直接解析JSON格式的文本，前提是：该JSON必须采用JS格式书写的才行，如果该JSON是采用Java格式写的，必须使用eval()函数转换后，方可被JS解析，该eval(“”)函数接收一个字符串格式的内容。

2.如何使用：

response.setContentType("text/html;charset=utf-8");

OK，ajax的简单使用到此。

源码下载

0 0