Ajax详解

一:什么是Ajax

Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和xml。也就是异步请求更新技术。Ajax是一种对现有技术的一种新的应用,不是一门新语言。它是用JavaScript编写。与xml的关系就是可以读取和返回xml文件。

二:Ajax中的对象和方法说明

Ajax的核心对象就是xmlHttpRequest

XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

1:方法

xmlHttpRequst对象利用send()和open()方法与服务器进行交互。

open(method,url,async)

  • method:请求的类型;GET 或 POST
  • url:文件在服务器上的位置
  • async:true(异步)或 false(同步)

send(string)

  • string:仅用于 POST 请求

如果是post请求,必须使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中设置发送的数据:

[javascript] view plaincopy

  1. xmlhttp.open("POST","ajax_test.asp",true);
  2. xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  3. xmlhttp.send("fname=Bill&lname=Gates");

2 :属性

readyState

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪

State

  • 200: "OK"
  • 404: 未找到页面

responseText

  • 获得字符串形式的响应数据。

responseXML

  • 获得 XML 形式的响应数据。

onreadystatechange

  • 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。

三:Ajax运行原理(为什么要用Ajax)

ajax通过xmlhttpRequest对象执行操作,其中xmlhttpRequest对象是在浏览器中内置的一个对象

其运行原理就相当于创建了一个请求代理,通过代理去完成与服务器的交互,交互的过程中客户不需要等待,还可以进行其它的工作,交互完成以后,代理再将交互的结果返回给客户页面。

第一步:创建xmlHttpRequest对象,每个浏览器的创建不是都相同。

[javascript] view plaincopy

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

通常情况下为了兼容所有浏览器,每个都要写上。

第二步:设置open()方法和setRequestHeader()方法参数。

将请求方式,请求目的地址,和请求类型设置到open方法中,如果是post请求,则需要设置setRequestHeader()参数

第三步:发送执行

利用send方法,与服务器真正的交互执行

第四步:获得执行结果

首先判断执行是否完成,然后通过js操作dom元素,将返回的responseText返回到页面

[javascript] view plaincopy

xmlhttp.onreadystatechange=function()  
  {  
 //判断是否发送成功,是否找到请求页面等 
 if (xmlhttp.readyState==4 && xmlhttp.status==200)  
    {  
 //操作页面元素 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;  
    }  
  }  

四:Ajax实例(焦点离开验证用户是否存在)

利用ajax在焦点离开的时候判断注册的用户是否存在

[javascript] view plaincopy

var xmlHttp;//声明xmlHttp对象 
//实例化xmlHttpRequest对象 
function createXMLHttpRequest() {  
 //表示当前浏览器不是ie,如ns,firefox 
 if(window.XMLHttpRequest) {  
        xmlHttp = new XMLHttpRequest();  
    } else if (window.ActiveXObject) {  
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
    }  
}  
//input失去焦点事件onblur(),调用这个js方法验证 
function validate(field) {  
 if (trim(field.value).length != 0) {  
 //创建XMLHttpRequest 
        createXMLHttpRequest();  
 //每次请求的url地址不同,利用时间产生不同url地址,可以防止缓冲造成问题 
 var url = "user_validate.jsp?userId=" + trim(field.value) + "×tamp=" + new Date().getTime();  
        xmlHttp.open("GET", url, true);  
 //方法地址,处理完成后自动调用,回调 
        xmlHttp.onreadystatechange=function() { //匿名函数 
 if(xmlHttp.readyState == 4) { //Ajax引擎初始化成功 
 if (xmlHttp.status == 200) { //http协议成功 
                    document.getElementById("userIdSpan").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";  
                }else {  
                    alert("请求失败,错误码=" + xmlHttp.status);  
                }  
            }  
        };  
 //将参数发送到Ajax引擎 
        xmlHttp.send(null);  
    }else {  
        document.getElementById("userIdSpan").innerHTML = "";  
    }  
}  

页面部分代码:

[html] view plaincopy

<td width="78%"> 
 <input name="userId" type="text" class="text1" id="userId" 
 size="10" maxlength="10" onkeypress="userIdOnKeyPress()" value="<%=userId %>" onblur="validate(this)"><span id="userIdSpan"></span> 
</td> 

//后台验证方法利用jsp编写

[java] view plaincopy

<%@ page language="java" contentType="text/html; charset=GB18030" 
    pageEncoding="GB18030"%>  
<%@ page import="com.bjpowernode.drp.sysmgr.manager.*" %>      
<%     
 
 //可以采用清除缓存的方法,如下 
 //response.setContentType("text/xml"); 
 //response.setHeader("Cache-Control", "no-store"); //HTTP1.1     
 //response.setHeader("Pragma", "no-cache"); //HTTP1.0 
 //response.setDateHeader("Expires", 0);  
 
 //out.println("Hello"); 
 //Thread.currentThread().sleep(3000); 
    String userId = request.getParameter("userId");  
 if (UserManager.getInstance().findUserById(userId) != null) {  
        out.println("用户代码已经存在");  
    }  
 
%  

本文分享自微信公众号 - java达人(drjava)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-04-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • AlphaGo:黑色方碑?

    围棋一年前还通常被认为是10年内都无法被人工智能攻克的防线,然而转眼就变成了马其诺防线了。那么这场人机大战到底意味着什么?人类已经打开了潘多拉魔盒吗? Al...

    java达人
  • 透过源码学习设计模式5—状态模式和Spring状态机

    状态模式即允许一个对象在其内部状态改变时改变它的行为。对象看起来似乎修改了它的类,换句话说状态模式把所研究的对象的行为包装在不同的状态对象里,每一个状态对象都属...

    java达人
  • 为什么需要Spring Ioc

    如果没有没有亲自做过一些项目,直接上手就学spring那样的框架,你可能会觉得莫名其妙,有java就够了呀,为什么要学习这么一个陌生的东西。框架其实是软件的半成...

    java达人
  • AJAX 原理与 CORS 跨域

    https://segmentfault.com/a/1190000011549088

    黄泽杰
  • Silverlight 3.0 中的 Local Connection

    现在很多的需求中需要一个插件实例和另一个实例进行通讯。在同一个页面中调用Html、js等来通讯,而这个往往有一些限制,需要专门的去设置一些权限。在Silverl...

    用户1172164
  • 常规同频同播无线通讯系统的技术特点及应用

    常规同频同播系统,是通过在一个地区架设多台中转台,让各中转台形成链路互通且保持在相同的频率工作,从而实现一个地区的无线信号有效覆盖,确保对讲机终端在网内的任意位...

    用户2561367
  • 12-WebForm轻量版增删改查

    1、Repeater控件可以直接放在body中!Form去掉!(这里只是展示的功能)

    静心物语313
  • 双拼域名yansuan.com被木雨林收购

    拼音在中国通用程度,无需过多言语解释,大家都会懂。因此拼音域名在国内市场甚是吃香,备受投资人青睐。近日,投资人木雨林在朋友圈爆料称,收购了一枚双拼域...

    躲在树上的域小名
  • ANCWEB - 基于 ASP.NET CORE 2.0 的 WEB 开发 二

    这个结果和所需要的数据库结构有一定的差异,那么,可以通过为Domain Model的相应属性添加一些约束,来进行变更。

    李郑
  • EOSIO 转帐详解

    在EOS网络中存在两种货币,一种是EOS,还有一种是EOS网络中的代币。说到这里大家似乎有点疑惑,举个简单的例子,就好比ETH网络中的ETH,ETH网络中的其他...

    EOS中文社区

扫码关注云+社区

领取腾讯云代金券