　　　　Unit01： Ajax 　　　　

1. ajax是什么?

(asynchronous javascript and xml)
ajax是一种用来改善用户体验的技术，本质是利用浏览器提供的一个
特殊对象(XMLHttpRequest,我们可以称之为ajax对象)向服务器发送
异步请求;服务器返回部分数据（一般不需要返回一个完整的页面），
浏览器利用这些数据对当前页面做部分更新；整个过程不打断用户的
操作，页面无刷新。
注：异步请求，指的是发请求时，浏览器不会销毁当前页面，用户仍然
可以对当前页面做其它操作。

2. 如何获得ajax对象?

3. ajax对象的几个重要属性

onreadystatechange

用来绑订事件处理函数(用来处理readystatechange事件)。
注：当ajax对象的readystate属性值发生了改变（比如从0变成了1，
就会产生readystatechange事件）。

readyState

它有五个值(0,1,2,3,4),表示ajax对象与服务器通信的进展，
其中4表示ajax对象已经获得了服务器返回的所有的数据。

responseText

用来获得服务器返回的文本数据。

responseXML

用来获得服务器返回的xml数据。

status

用来获得服务器返回的状态码。

4. 编程步骤

step1. 获得ajax对象。
比如: var xhr = getXhr();

step2. 利用ajax对象发请求。
(1)get请求:
比如:

true:异步
false:同步(发请求时，浏览器会锁定当前页面，用户不能够对当前页面
做其它操作)。
(4)post请求:
比如:

注：按照http协议要求，如果发送的是post请求，必须在请求数据包里面添加content-type消息头。ajax对象默认情况下，不会添加该消息头，所以，需要调用setRequestHeader方法来添加。
step3. 编写服务器端的程序。
通常只需要返回部分数据。
step4. 编写事件处理函数。

代码：

src/main/java

web

package web;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.Random;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class ActionServlet extends

    HttpServlet{

    public void service(

            HttpServletRequest request,

            HttpServletResponse response)

    throws ServletException,IOException{

        response.setContentType(

                "text/html;charset=utf-8");

        PrintWriter out =

                response.getWriter();

        //获得请求资源路径

        String uri = request.getRequestURI();

        System.out.println("uri:" + uri);

        String action =

            uri.substring(

                    uri.lastIndexOf("/"),

                    uri.lastIndexOf("."));

        System.out.println("action:" + action);

        if("/check_uname".equals(action)){

            //检查用户名是否被占用

            String uname =

                request.getParameter("uname");

            System.out.println("uname:" + uname);

            if("King".equals(uname)){

                out.println("用户名被占用");

            }else{

                out.println("可以使用");

            }

        }else if("/getNumber".equals(action)){

            //返回一个随机整数

            Random r = new Random();

            int number = r.nextInt(100);

            System.out.println("number:" + number);

            out.println(number);

        }

    }

}

ActionServlet.java

webapp/js

/*

 * 用于获得ajax对象

 */

function getXhr() {

    var xhr = null;

    if (window.XMLHttpRequest) {

        // 非ie

        xhr = new XMLHttpRequest();

    } else {

        xhr = new ActiveXObject(

                'MicroSoft.XMLHttp');

    }

    return xhr;

}

//依据id返回节点

function $(id){

    return document.getElementById(id);

}

//依据id找到节点，返回节点的value

function $F(id){

    return $(id).value;

}

ajax.js

WEB-INF

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">

  <servlet>

      <servlet-name>action</servlet-name>

      <servlet-class>web.ActionServlet</servlet-class>

  </servlet>

  <servlet-mapping>

      <servlet-name>action</servlet-name>

      <url-pattern>*.do</url-pattern>

  </servlet-mapping>

</web-app>

web.xml

webapp

<%@ page

 contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<html>

<head>

<script type="text/javascript"

src="js/ajax.js">

</script>

<script type="text/javascript">

    function showNumber(){

        //step1.获得ajax对象

        var xhr = getXhr();

        //step2.发请求

        xhr.open('get','getNumber.do',true);

        xhr.onreadystatechange=function(){

            //step4.处理服务器返回的数据

            if(xhr.readyState == 4 &&

                    xhr.status == 200){

                //获得服务器返回的数据

                var txt = xhr.responseText;

                //更新页面

                $('d1').innerHTML = txt;

            }

        };

        xhr.send(null);

    }

</script>

</head>

<body style="font-size:30px;">

    <a href="javascript:showNumber();">点这儿显示一个随机数</a>

    <br/>

    <div id="d1"></div>

</body>

</html>

random.jsp

<%@ page

 contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<html>

<head>

    <script type="text/javascript"

        src="js/ajax.js">

    </script>

    <script type="text/javascript">

        //检查用户名有没有被占用

        function check_uname(){

            //step1. 获得ajax对象

            var xhr = getXhr();

            //step2. 利用ajax对象发请求

            xhr.open('get',

                    'check_uname.do?uname='

                            + $F('uname'),true);

            xhr.onreadystatechange = function(){

                //step4. 处理服务器返回的数据

                if(xhr.readyState == 4 &&

                        xhr.status == 200){

                    //获得服务器返回的数据

                    var txt = xhr.responseText;

                    //更新页面

                    $('uname_msg').innerHTML = txt;

                }

            };

            xhr.send(null);

        }

    </script>

</head>

<body style="font-size:30px;">

    <form action="" method="post">

        用户名:<input id="uname" name="uname"

        onblur="check_uname();"/>

        <span id="uname_msg"></span>

        <br/>

        密码:<input type="password" name="pwd"/>

        <br/>

        <input type="submit" value="注册">

    </form>

</body>

</html>

regist.jsp

注释：使用post方式

<%@ page

 contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<html>

<head>

    <script type="text/javascript"

        src="js/ajax.js">

    </script>

    <script type="text/javascript">

        function check_uname(){

            //step1.获得ajax对象

            var xhr = getXhr();

            //step2.发请求

            xhr.open('post','check_uname.do',true);

            //添加一个消息头(content-type)

            xhr.setRequestHeader('content-type',

                    'application/x-www-form-urlencoded');

            xhr.onreadystatechange = function(){

                //step4.处理服务器返回的数据

                if(xhr.readyState == 4 &&

                        xhr.status ==200){

                    var txt = xhr.responseText;

                    $('uname_msg').innerHTML = txt;

                }

            };

            xhr.send('uname=' + $F('uname'));

        }

    </script>

</head>

<body style="font-size:30px;">

    <form action="" method="post">

        用户名:<input id="uname" name="uname"

        onblur="check_uname();"/>

        <span id="uname_msg"></span>

        <br/>

        密码:<input type="password" name="pwd"/>

        <br/>

        <input type="submit" value="注册">

    </form>

</body>

</html>

regist_post.jsp

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

    <script type="text/javascript">

    function getXhr(){

        var xhr = null;

        if(window.XMLHttpRequest){

            //非ie

            xhr = new XMLHttpRequest();

        }else{

            xhr = new ActiveXObject(

                    'MicroSoft.XMLHttp');

        }

        return xhr;

    }

    </script>

</head>

<body style="font-size:30px;">

        <a href="javascript:alert(getXhr());">ClickMe</a>

</body>

</html>

test.html

Unit01： Ajax介绍的更多相关文章

django Ajax介绍
1.Ajax技术认识ajax之前必须先了解json模块,json(Javascript Obiect Notation,JS对象标记)属于一种轻量级的数据交换格式 json的格式来源于js的格式 ...
Ajax介绍
AJAX AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJA ...
Ajax介绍及爬取哔哩哔哩番剧索引追番人数排行
Ajax,是利用JavaScript在保证页面不被刷新,页面链接不改变的情况下与服务器交换数据并更新部分网页的技术.简单的说,Ajax使得网页无需刷新即可更新其内容.举个例子,我们用浏览器打开新浪微博 ...
关于Jquery中ajax介绍
jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需 ...
[Ajax系列]Ajax介绍
Ajax简介: Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. What ? AJAX=异步JavaScript和XML AJAX是一种用于创建快读动态网页的技术通过在后台语 ...
JQuery AJAX介绍
new ActiveXObject("Microsoft.XMLHTTP")是IE中创建XMLHttpRequest对象的方法.非IE浏览器中创建方法是new XmlHttpReq ...
Ajax 介绍
Ajax的关键技术: 异步处理数据使用XHTML(HTML)和CSS构建标准化的展示层使用DOM(document object model)进行动态显示和交互使用XML和XSLT进行数据交换 ...
ajax介绍及使用
一.什么是ajax:(只刷新局部页面的技术) AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发 ...
[TimLinux] JavaScript 原生AJAX介绍
1. AJAX 异步JavaScript + XML,用于浏览器内部通过前端JavaScript语言操纵,与HTTP服务器进行连接通信的技术. 2. XMLHttpRequest对象从IE7+,以及 ...

随机推荐

从HDC转换到leptonica PIX
void CAssistDlg::OnBnClickedTest() { HDC hdc = ::GetDC(NULL); HDC hdcMem = CreateCompatibleDC(hdc); ...
二十三、DBMS_METADATA(提供提取数据库对象的完整定义的接口)
1.概述作用:提供提取数据库对象的完整定义的接口.这些定义可以用XML或SQL DDL格式描述.提供两种类型接口:可编程控制的接口:用于Ad Hoc查询的简单接口. 2.包的组成 dbms_meta ...
bzoj2929
题解: 网络流裸题代码: #include<cstdio> #include<cstring> #include<algorithm> #include<c ...
不能在具有唯一索引“IX_******”的对象“dbo.****”中插入重复键的行。重复键值为 (110, 372000, 2)。
当尝试插入数据,或者更新某个表的时候出现不能在具有唯一索引“IX_******”的对象“dbo.****”中插入重复键的行.重复键值为 (110, 372000, 2). 遇到这个问题的时候,请找到 ...
HM编码器代码阅读(1)——介绍以及相关知识
HM是HEVC(H.265)的开源实现,可以从网上直接下载.HEVC(H.265)是新一代的视频编解码标准.本人目前研究的只是编码器部分,而且还是入门阶段!为了提高自己,边学边记,由于理解不够深入,难 ...
基于EasyNVR实现RTSP/Onvif监控摄像头Web无插件化直播监控
前言随着互联网的发展,尤其是移动互联网,基于H5.微信的应用越来越多,企业也更多地想基于H5.微信公众号来快速开发和运营自己的产品,那么传统的安防IPC所输出的各种RTSP.GB28181.SDK视 ...
python删除list中元素的三种方法
a.pop(index):删除列表a中index处的值,并且返回这个值. del(a[index]):删除列表a中index处的值,无返回值. del中的index可以是切片,所以可以实现批量删除. ...
c++语言第二次作业
一题目7-1统计学生成绩 1实验代码 #include<stdio.h> int main(void) { int i,n,grade,A,B,C,D,E; A=B=C=D=E=; sca ...
stack组件03
继昨天留下的问题思路: 结果: 优化: from stark.service.site import site,ModelSatrk from .models import * from djang ...
windows之死活格式化不了D/E/F盘
唉见教程:Win10系统无法格式化电脑D盘的解决方法

Unit01： Ajax介绍

Unit01： Ajax

1. ajax是什么?

2. 如何获得ajax对象?

3. ajax对象的几个重要属性

onreadystatechange

readyState

responseText

responseXML

status

4. 编程步骤

代码：

Unit01： Ajax介绍的更多相关文章

随机推荐

热门专题

　　　　Unit01： Ajax 　　　　