Ajax基础知识《一》

　　对于网站开发人员，一定不会陌生的Ajax技术，本篇就让我们认识一下它，或许在日后的开发过程中我们就可以使用到。Ajax在那方面使用的比较多呢？答案：表单注册，传统的表单注册，有时需要填写大量的信息，当我们好不容易写完了，一点击提交，后台发现我们有一些字段填写有误，这是就会提示我们注册失败，请重新注册，遇到这样的情况，我想你和我一样，一定恨透这个网站了。那如何来优化这个过程呢？这个时候我们的Ajax就排上用场了，当我们填写完一行信息，就可以通过Ajax来异步的进行后台判断。说了这么多，简单的讲就是我们本篇谈到的Ajax可以实现异步操作。好了，下面我们来一起领略一下它的风采。

　1、创建Ajax：

　　当我们需要使用Ajax时，便可以通过在javascript中创建一个XMLHttpRequest对象，通过该对象进行相关的处理。这里我们需要注意的是，有些浏览器并不支持Ajax，这个时候，当我们创建对象时就要进行一定的判断，以便保证我们的页面在不同的浏览器上正常显示。

if(window.XMLHttpRequest){//检测浏览器版本是否支持

       hppt = new XMLHttpRequest();//IE7+;Firefox;Chrome;Opera

 }else{
       hppt = new ActiveXObject("Microsoft.XMLHTTP");//IE6;IE5
 }

　2、表单界面设计：

<%@ 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>注册</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">

    <style type="text/css">

        input{

            width: 160px;

            height: 25px;

        }

    </style>

    <script type="text/javascript">

        function setStyle(x){

            document.getElementById(x).style.background="yellow";

        }

        function clearStyle(y){

            document.getElementById(y).style.background="white";

            var hppt = new XMLHttpRequest();

            http.open("GET", "http://127.0.0.1:8080/Ajxy/servlet/ajax?name=小米&pwd=123456", true);

            http.send();

            //http.open("POST", "http://127.0.0.1:8080/Ajxy/servlet/ajax", true);

            //http.send();

            //http.open("POST", "http://127.0.0.1:8080/Ajxy/servlet/ajax", true);

            //http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            //http.send("name=小米&sex=男");

            //处理结果判断

            if (http.readyState==4) {

                if (http.status==200) {

                    alert("处理完成");

                    document.getElementById("news").innerHTML = request.responseText;

                } else {

                    alert("发生错误：" + request.status);

                }

            }else{

                //alert(http.readyState);

            }

        }

    </script>

  </head>

  <body>

    <center>

        <div id="news"></div>

        <table>

            <form method="post" action="<%=request.getContextPath() %>/servlet/ajax" enctype="application/x-www-form-urlencoded">

                <!-- onfocus="":监听获得焦点事件    onblur="":监听失去焦点事件     disabled="disabled"：销毁，不存在的     readonly="readonly"：只读-->

                <tr>

                    <td>姓名：</td><td><input type="text" name="name" id="name" onfocus="setStyle(this.id)" onblur="clearStyle(this.id)"/></td>

                </tr>

                <tr>

                    <td>密码：</td><td><input type="password" name="pwd" id="pwd" onfocus="setStyle(this.id)" onblur="clearStyle(this.id)"/></td>

                </tr>

                <tr>

                    <td>邮箱：</td><td><input type="text" name="email" id="email" onfocus="setStyle(this.id)" onblur="clearStyle(this.id)"/></td>

                </tr>

                <tr>

                    <td>操作：</td><td><input type="submit" id="submit" value="注册"/></td>

                </tr>

            </form>

        </table>

    </center>

  </body>

</html>

　3、Ajax的状态码：

　　readyState 状态状态说明
　　　　(0)未初始化
　　　　　　此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在，否则浏览器会报错－－对象不存在。
　　　　(1)载入
　　　　　　此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
　　　　(2)载入完成
　　　　　　此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
　　　　(3)交互
　　　　　　此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。
　　　　(4)完成
　　　　　　此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。
　　　　概而括之，整个XMLHttpRequest对象的生命周期应该包含如下阶段：创建－初始化请求－发送请求－接收数据－解析数据－完成

　4、获取相应的方式：

　5、select类：用来接收Ajax传输过来的数据。

public class ajax extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");

        response.setCharacterEncoding("utf-8");

        String name = request.getParameter("name");

        name = new String(name.getBytes("iso-8859-1"), "utf-8");

        String pwd = request.getParameter("pwd");

        System.out.println("name="+name);

        System.out.println("pwd="+pwd);

        System.out.println("GET_______Ajax");

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");

        response.setCharacterEncoding("utf-8");

        String name = (String) request.getParameter("name");

        System.out.println("name="+name);

        String sex = (String)request.getParameter("sex");

        System.out.println("sex="+sex);

        System.out.println("POST__________Ajax");

    }

}

　　好了对于Ajax基础知识的入门学习，就为大家分析完毕。

Ajax基础知识《一》的更多相关文章

Ajax基础知识（二）
接上一篇 Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...
Ajax基础知识浅析（含php基础语法知识）
1.php基础语法后缀名为.php的文件 (1) echo 向页面中输入字符串 <?php 所有php相关代码都要写在<?php ?>这个标签之中 echo &q ...
11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
14.ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
AJAX 基础知识
1.AJAX 是一种用于创建快速动态网页的技术.而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不 ...
Ajax基础知识（一）
随便在百度谷歌上输入Ajax都会出现一大堆的搜索结果,这已经不再是什么新奇的技术了.但若从一开始就学习了ASP.Net,使用功能齐全的Visual Studio集成开发工具,或许未必能对访问一个动态网 ...
Json,Gson,Ajax基础知识
//json 是一种轻量级的文本格式,解析简单,他也是一键值来存,数据与数据的分割是以,来分割 //{} 看到大括号就是一个对象,[]代表集合 ,基本上所有数据的交互都是以json格式来进行传递的 / ...
ajax基础知识
一个简单的ajax例子: Uncaught SyntaxError: Unexpected token input看看是否是漏了:或者函数没有() //更新单个简历完整度 function updat ...

随机推荐

dom4j解析xml的增加信息
想要在xml中增加信息,那么就要先找到你要加信息的节点前三行是固定模式,主要是找到xml文件的地址,并且得到根节点,再从根节点中便利出来movie的所有节点之后用集合接收 SAXReader rea ...
oracle迁移mysql数据库注意
oracle转mysql修改: . substr() substr( string , 0, 10) 这里测试必须从第一位获取既是 substr(string , 1 , 10)2. to_ch ...
针对Excel的vbs操作
工程中具有导入Excel数据的功能,但是需要满足一定的格式.为了在导入之前,对Excel的格式进行规范,对vbs脚本语言进行了一定的了解,并实现了一个可以将Excel全部单元格设为文本格式的vbs脚本 ...
Fragment、Activity 保存状态
Activity 保存状态1. void onCreate(Bundle savedInstanceState) 当Activity被第首次加载时执行.我们新启动一个程序的时候其主窗体的onCreat ...
练习1-23：删去C语言程序中所有的注释语句（C程序设计语言第2版）
#include <stdio.h> main() { FILE * fp_i; FILE * fp_o; fp_i = fopen("input.txt", &quo ...
在浏览器的JavaScript里new Date().toUTCString()后，传递给C# DateTime().TryParse()会发生什么？
Format 1. Sun, 09 Oct 2016 13:24:35 GMT Format 2. Sun, 9 Oct 2016 13:36:09 UTC Format 1 是在IE里面产生的(Wi ...
[Asp.net 开发系列之SignalR篇]专题五：SignalR支持的平台
SignalR支持多种服务器和客户端配置.此外,每种传输方式都有自身的要求限制:如果某种传输方式不被系统支持,SignalR能够优雅地将故障转移到其他类型的传输方式.关于SignalR所支持的传输方式 ...
Sql Server tempdb原理-缓存机制解析实践
Tempdb就像Sqlserver的临时仓库,各式各样的对象,数据在里面进行频繁计算,操作.大量的操作使得tempdb可能面临很大压力,tempdb中缓存的设计就是为了缓解这些压力.这次就为大家介绍下 ...
Java多线程5：synchronized锁方法块
synchronized同步代码块用关键字synchronized声明方法在某些情况下是有弊端的,比如A线程调用同步方法执行一个较长时间的任务,那么B线程必须等待比较长的时间.这种情况下可以尝试使用 ...
团队项目——站立会议DAY9
第九次站立会议记录: 参会人员:张靖颜,钟灵毓秀,何玥,赵莹,王梓萱项目进展: 1.张靖颜:部署总体战略,需求分析,反复运行程序并完善. 2.钟灵毓秀:近一步修改代码,并进行功能性的扩展,不断完善. ...

Ajax基础知识《一》

Ajax基础知识《一》的更多相关文章

随机推荐

热门专题