首页 > Web开发 > 详细

Ajax

时间:2019-05-12 14:40:45      阅读:134      评论:0      收藏:0      [点我收藏+]

ajax简介

Ajax的全称是:Asynchronous JavaScript And XML,指的是异步 JavaScript 及 XML(其实主要用的就是javascript技术),它不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。Ajax的特点是异步,比如可以使用Ajax更新局部网页、使用Ajax在不刷新页面的情况下查询数据、验证用户注册的用户名是否唯一等。

Ajax交互模型:

 

技术分享图片

 

同步web交互方式

技术分享图片

异步web交互方式

技术分享图片

XMLHttpRequest对象

JavaScript中XMLHttpRequest对象是整个Ajax技术的核心,它提供了异步发送请求的能力。
对象的创建方式
对于不同的浏览器,对象的创建方式是不同的。

var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
return xmlhttp;

常用方法

  • open(method,URL,async)
    建立与服务器的连接
    method参数指定请求的HTTP方法,典型的值是GET或POST
    URL参数指请求的地址
    async参数指定是否使用异步请求,其值为true或false,默认是true
  • send(content)
    发送请求
    content指定请求的参数
  • setRequestHeader(header,value)
    设置请求的头信息

常用属性

  • onreadystatechange
    指定回调函数
  • readyState
    XMLHttpRequest的状态信息

 

就绪状态码说明
0 XMLHttpRequest对象没有完成初始化即:刚刚创建。
1 XMLHttpRequest对象开始发送请求调用了open方法,但还没有调用send方法。请求还没有发出
2 XMLHttpRequest对象的请求发送完-成send方法已经调用,数据已经提交到服务器,但没有任何响应
3 XMLHttpRequest对象开始读取响应,还没有结束收到了所有的响应消息头,但正文还没有完全收到
4 XMLHttpRequest对象读取响应结束一切都收到了

 

 

使用Ajax校验用户名

通常情况下在一个系统中的用户的登录名是唯一的,为了保证用户名的唯一性,需要在用户注册时添加校验,即根据用户输入的用户名去数据库中查找,这里使用ajax校验用户名可以很好的提升用户体验,用户输入完用户名失去鼠标焦点后通过ajax去数据库中查找是否唯一,然后根据结果给用户相应的提示信息,这样对于用户来说非常方便。

什么是回调函数
回调函数就是你编写好了一个函数,让软件系统来调用这个函数,该函数就是回调函数。说的简单点其实就是让系统调用你的函数就是回调,那你调用系统的函数是直调。
举例来说,你跟马云谈生意,聊天结束后,你跟马云说以后有什么需要帮助的可以联系我的秘书小张。这个秘书小张就可以看做是回调函数,当马云联系你的秘书小张时,叫做调用回调函数。

代码示例:

创建jsp添加一个表单:

<body>
        用户名:<input type="text" name="name" /><span id="msg"></span><br/>
</body>

在jsp中添加onblur事件绑定,然后使用ajax完成异步请求

<script type="text/javascript">
    window.onload=function(){
        var nameElement = document.getElementById("name");
        //绑定onblur事件
        nameElement.onblur = function(){
            //this等价于nameElement
            var name = this.value;
            //创建XMLHttpRequest对象
            var xhr;
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xhr = new XMLHttpRequest();
            } else {// code for IE6, IE5
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //注册回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4){//请求一切正常
                    if(xhr.status==200){//服务器响应一切正常
                        var msg = document.getElementById("msg");
                        if(xhr.responseText=="true"){
                            msg.innerHTML =  "<font color=‘red‘>用户名已存在</font>";
                           
                        }else{
                            msg.innerHTML = "可以使用";
                        }
                    }
            }
        }

        //创建连接
        xhr.open("get","${pageContext.request.contextPath }/regist?name="+name);
        //发送请求
        xhr.send(null);
        }

    }
</script>

创建用来处理请求的servlet,这里省略JDBC数据库相关的操作,直接将用户名写死在程序中:

 1 package com.monkey1024.servlet;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.http.HttpServlet;
 8 import javax.servlet.http.HttpServletRequest;
 9 import javax.servlet.http.HttpServletResponse;
10 
11 /**
12  * 注册
13  */
14 public class RegistServlet extends HttpServlet {
15     private static final long serialVersionUID = 1L;
16 
17     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
18         PrintWriter out = response.getWriter();
19         String name = request.getParameter("name");
20         if("monkey1024".equals(name)){
21             out.print(true);
22         }else{
23             out.print(false);
24         }
25     }
26 
27     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
28         doGet(request, response);
29     }
30 
31 }

 

Ajax

原文:https://www.cnblogs.com/samuraihuang/p/10852194.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!