Ajax教程一响应text文本

来源：互联网发布：mac yosemite10.11 编辑：程序博客网时间：2024/06/07 15:57

1、什么是AJAX

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

与服务器异步交互；
浏览器页面局部刷新；

2、案例

2.1准备jsp文档

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>    <title>响应text文本</title>    <meta http-equiv="pragma" content="no-cache">    <meta http-equiv="cache-control" content="no-cache">    <meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="This is my page">    <script type="text/javascript" src="Ajax/createXMLHttpRequest/createXMLHttpRequest.js"></script>    <script type="text/javascript">        //文档加载完毕后执行        window.onload = function () {            var btn = document.getElementById("btn");            //给按钮的点击事件注册监听            btn.onclick = function () {                /*                 * ajax四步操作，得到服务器的响应                 * 把响应结果显示到h1元素中                 */                //1. 得到异步对象                var xmlHttp = createXMLHttpRequest();                /*                 2. 打开与服务器的连接                 * 指定请求方式                 * 指定请求的URL                 * 指定是否为异步请求                 */                xmlHttp.open("GET", "<c:url value='/Servlet'/>", true);                /*                 * 3. 发送请求                 * GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送！                 */                xmlHttp.send(null);                /*                 * 4. 给异步对象的onreadystatechange事件注册监听器                 *                 */                //当xmlHttp的状态发生变化时执行                xmlHttp.onreadystatechange = function () {                    // 双重判断：xmlHttp的状态为4（服务器响应结束），以及服务器响应的状态码为200（响应成功）                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {                        // 获取服务器的响应结束                        var text = xmlHttp.responseText;                        // 获取h1元素                        var h1 = document.getElementById("h1");                        h1.innerHTML = text;                    }                };            };        };    </script></head><body><h2>    1. ajax是什么?  <br>    * asynchronous javascript and xml：异步的js和xml<br>    * 它能使用js访问服务器，而且是异步访问！<br>    * 服务器给客户端的响应一般是整个页面，一个html完整页面！但在ajax中因为是局部刷新，那么服务器就不用再响应整个页面！而只是数据！<br>    > text：纯文本 <br>    > xml：大家都熟悉！！！ <br>    > json：它是js提供的数据交互格式，它在ajax中最受欢迎！ <br></h2><hr><button id="btn">点击这里、响应text文本</button><h1 id="h1"></h1></body></html>

2.2servlet

package data;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;/** * Servlet implementation class Servlet * index.jsp * * 1. ajax是什么? * asynchronous javascript and xml：异步的js和xml * 它能使用js访问服务器，而且是异步访问！ * 服务器给客户端的响应一般是整个页面，一个html完整页面！ * 但在ajax中因为是局部刷新，那么服务器就不用再响应整个页面！而只是数据！ *     > text：纯文本 *     > xml：大家都熟悉！！！ *     > json：它是js提供的数据交互格式，它在ajax中最受欢迎！ */@WebServlet("/Servlet")public class Servlet extends HttpServlet {private static final long serialVersionUID = 1L;/*get request*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {/*响应编码*/response.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");System.out.println("get request and HELLO AjAX!响应文本");response.getWriter().print("get request and  hello ajax!!!响应文本");}/*post request*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {/*响应编码*/response.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=UTF-8");String name = request.getParameter("username");String strNmae = new String(name.getBytes("ISO-8859-1"),"UTF-8");//byte[] n = name.getBytes("ISO-8859-1");//String strNmae = new String(n,"UTF-8");System.out.println("doPost request and HELLO AjAX!"+strNmae);response.getWriter().print("doPost request and hello ajax!!!"+strNmae);}}

2.3createXMLHttpRequest.js工具文件

/** * 创建XMLHttpRequest * return XMLHttpRequest * 适用常用浏览器 *  */function createXMLHttpRequest() {try {//大多数浏览器return new XMLHttpRequest();} catch (e) {try {//IE6.0return ActvieXObject("Msxml2.XMLHTTP");} catch (e) {try {//IE5.5及更早版本return ActvieXObject("Microsoft.XMLHTTP");} catch (e) {alert("该浏览器不支持XMLHttpRequest!");throw e;}}}}

2.4、效果图

8、教程连接

Ajax教程一响应text文本
Ajax演示用户名是否被注册例子
Ajax教程

1 0