`
谙an谧
  • 浏览: 9635 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ajax初学

    博客分类:
  • JS
阅读更多

Ajax操作步骤
1.创建XMLHttpRequest对象
除老版本ie(IE5,IE5.5,IE6)外,其他现代浏览器都内建XMLHttpRequest对象。
创建XMLHttpRequest对象前先检查浏览器支持哪种对象创建方式。
var xmlHttp = false;//用于存储XMLHttpRequest对象
var createXmlHttp = function(){
    //针对老版本ie(IE5,IE5.5,IE6)
    try {
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e2) {
            xmlHttp = false;
        }   
    }
    //针对IE7+, Firefox, Chrome, Opera, Safari
    if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
        xmlHttp = new XMLHttpRequest();
    }
    //不支持的浏览器
    if(xmlHttp==undefined||xmlHttp==null){
            alert("error!");
       }
};

2.设置要发送到服务器的请求,调用XMLHttpRequest对象的open()方法。
open(method,url,async);
参数解释
method:为请求的类型:GET或POST;
GET方式提交参数列表存放在url中,大小限制在1kb下,同时参数将被显示在地址栏中,并被浏览器缓存。
所以为了避免得到浏览器缓存的结果,使用GET方式时想URL添加唯一标识,日期或随机数;
例如:xmlHttp.open("GET","test.jsp?t="+Math.random(),true);
使用GET方式需要处理参数中文问题,url = encodeURL(url);
服务器端处理参数乱码问题:value = new String(value.getBytes("iso-8859-1"),"UTF-8");

POST方式提交时浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器,
而不是作为URL地址的参数进行传递,使用POST方式传递的数据量要比使用GET方式传送的数据量大的多。
使用POST方式时需要设置header的Context-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变量.
通常使用XmlHttpRequest对象的SetRequestHeader("Context-Type","application/x-www-form-urlencoded;")
例如:xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

url:为请求的路径地址可以为任何类型的文件,发送方式为GET时后接参数列表如:url ? name='name' & pwd='pwd';
其中url指向路径为Servlet时 该url为Servlet路径名不要'/';

async:true或false?;
async设置为true时表示允许发送异步请求,用于AJAX,默认,需要设置回调函数;
设置为true时JS无需等待服务器的响应,而是:
在等待服务器响应时执行其他脚本;
当响应就绪后对响应进行处理。

async为false时JS会等到服务器响应就绪后才继续执行,一般不推荐使用,不需要设置回调函数。

3.执行发送请求,调用XMLHttpRequest对象的send()方法;
send(string);
string:仅用于post方式提交,发送要提交到服务器的参数列表的等信息;
get情况下使用send(null),null表示firefox和ie都支持发送;

4.利用xmlHttp的onreadystatechange事件来监视xmlHttp.readyState的状态,每次改变都调用回调函数;
例如:xmlHttp.onreadystatechange = callBack;
XMLHttpRequest对象的三个重要属性:
onreadystatechange:存储函数,每当readyState属性改变时,就会调用该函数;
readyState:存有XMLHttpRequest的状态,从0到4变化;
0:请求为初始化;
1:服务器连接已建立;
2:请求已接受;
3:请求处理中;
4:请求已完成,且响应已就绪。
status:xmlHttpRequest的交互状态,其值有;
200:请求成功;
202:请求被接受,但未被完成;
404:请求资源未找到;
500:内部服务器错误。

5.在回调函数中处理返回值;
如果要接受来自服务器的响应,使用XMLHttpRequest对象的responseText或responseXML属性;

login.jsp
<html>
  <head>
   <script type="text/javascript" src="ajaxConf.js"></script>
    <title>login</title>

  </head>
 
  <body>
    <form name="" action="" >
        用户名:<input type="text" name="userName" id="userName"><div id="show"></div><br/>
        <input type="button" value="Click" onclick="check()">
    </form>
  </body>
</html>

ajaxConf.js
var xmlHttp = false;
var createXmlHttp = function(){
    try {
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e2) {
            xmlHttp = false;
        }   
    }
    if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
        xmlHttp = new XMLHttpRequest();
    }
    if(xmlHttp==undefined||xmlHttp==null){
            alert("error!");
       }
};

var check = function(){
    createXmlHttp();
    alert(xmlHttp);
    var userName = document.getElementById("userName");
    var url = "checkAjax?userName="+userName+"&btn=check";
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
    xmlHttp.onreadystatechange = callBack;

};

var callBack = function(){
    if (xmlHttp.readyState == 4) {
        alert(xmlHttp.status);
        if (xmlHttp.status == 200) {
            var message = xmlHttp.responseText;
            var show = document.getElementById("show");
            show.innerHTML = message;
        }
    }
};

checkAjax.java
public class checkAjax extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
   
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        String userName = request.getParameter("userName");
        String btn = request.getParameter("btn");       
        if(btn!=null && btn.equals("check"))
            if(userName==null) {
                out.print("用户名不能为空");
            } else {
                if (userName.equals("wangjue"))
                    out.print("用户名"+userName+"已被使用");
                else
                    out.print("用户名可以使用");
           
            }
        out.close();
    }
}

分享到:
评论

相关推荐

    Ajax开源代码(适合于ajax初学者)

    对于Ajax初学者,可以参考以下资源: 1. W3School的Ajax教程(https://www.w3school.com.cn/ajax/) 2. MDN Web文档的XMLHttpRequest(https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest) 3. 实战...

    ajax初学入门教程

    **Ajax初学入门教程** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这种技术使得用户可以与网页进行更流畅、更快捷的交互,提高了网页应用的用户体验...

    ajax简单入门讲解,是ajax初学者的好工具、好教程,是不可多得学习资料!

    本教程是为Ajax初学者准备的入门资料,将帮助你快速理解并掌握Ajax的基本概念和应用。 Ajax的核心组件包括JavaScript、XMLHttpRequest对象、DOM(Document Object Model)、CSS和JSON。首先,JavaScript是驱动Ajax...

    ajax初学者快速入门

    **Ajax初学者快速入门** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这种技术使得用户可以与网页进行更流畅的交互,提升了用户体验。Ajax的核心是...

    ajax初学者教程 PPT格式

    **Ajax 初学者教程** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页内容的技术。这种技术的核心是利用JavaScript与服务器进行异步通信,通过XML或其他格式的...

    Ajax.基础教程。Ajax初学者必备教材。

    Ajax.基础教程。包含Ajax的基本知识,是Ajax初学者必备的教材。

    AJAX 初学者的资料

    本文主要针对AJAX初学者,介绍其基本概念、工作原理和实践步骤。 首先,理解AJAX的核心在于XMLHttpRequest对象。这个对象是JavaScript中的一个内置对象,它提供了与服务器进行异步通信的能力。在所有现代浏览器中,...

    ajax初学必读(初学必读)

    ### AJAX初学必读知识点详解 #### 一、引言 在现代Web开发领域中,随着Web 2.0的兴起和发展,AJAX作为一种核心技术,极大地提升了用户体验与网站的交互能力。本文档基于《征服Ajax:Web2.0开发技术详解》的部分...

    [聊天留言]适合ajax初学者的简易聊天程序 v1.0_simplechat(ASP.NET源码).rar

    【标题】中的“[聊天留言]适合ajax初学者的简易聊天程序 v1.0_simplechat(ASP.NET源码).rar”表明这是一个基于Ajax技术的简单聊天程序,主要用于教学目的,适用于初学者学习Ajax和ASP.NET框架。这个程序的版本为...

    ASP.NET源码——[聊天留言]适合ajax初学者的简易聊天程序.zip

    在这个"ASP.NET源码——[聊天留言]适合ajax初学者的简易聊天程序.zip"中,我们有一个特别针对AJAX初学者设计的简单聊天应用。 AJAX,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种在无需...

    ASP.NET-[聊天留言]适合ajax初学者的简易聊天程序v1.0.zip

    这个压缩包"ASP.NET-[聊天留言]适合ajax初学者的简易聊天程序v1.0.zip"显然包含了一个专为AJAX(Asynchronous JavaScript and XML)初学者设计的简单聊天程序。AJAX是一种在无需刷新整个网页的情况下,能够更新部分...

    适合ajax初学者的简易聊天程序 v1.0

    适合ajax初学者的简易聊天程序 v1.0 适合ajax初学者的简易聊天程序 v1.0

    Ajax.基础教程。Ajax初学者必备的教材。

    Ajax.基础教程。包含Ajax相关的基础知识,是Ajax初学者必备的教材之一。

    Ajax初学者教程 API(清晰版)

    Ajax初学者教程 API(清晰版)

    ajax初学必读

    **Ajax(Asynchronous JavaScript and XML)技术是Web开发中的一个重要组成部分,它允许在...这个"ajax初学必读"资料集将带你一步步走进Ajax的世界,通过实践和理解,你将能够自如地运用Ajax构建高效、流畅的Web应用。

    ajaxDEMO 适合ajax初学者

    本AjaxDEMO适合初学者学习,旨在提供一个基础的实践平台,帮助理解Ajax的工作原理及其在实际开发中的应用。** ### 1. Ajax基础知识 Ajax的核心是JavaScript对象XMLHttpRequest,它允许在后台与服务器端通信。当...

    Ajax初学(Ajax.dll)

    对于初学者来说,Ajax.dll是一个很好的起点。在VS2005(Visual Studio 2005)中,你可以轻松地集成这个库,创建出具有Ajax功能的应用。它降低了Ajax技术的学习曲线,使得开发者可以快速上手,专注于业务逻辑的实现,...

    适合ajax初学者的简易聊天程序_网站在线聊天留言源码.rar

    适合ajax初学者的简易聊天程序_网站在线聊天留言源码

    适合ajax初学者的简易聊天程序

    本教程将引导初学者深入理解AJAX(异步JavaScript和XML)技术,通过一个实际的在线聊天程序项目来阐述其核心概念和应用。这个简易聊天程序的实现不依赖任何第三方的AJAX库,如jQuery或Prototype,而是完全依靠原生的...

Global site tag (gtag.js) - Google Analytics