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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏刘望舒

Android系统启动流程(四)Launcher启动过程与系统启动流程

前言 此前的文章我们学习了init进程、Zygote进程和SyetemServer进程的启动过程,这一篇文章我们就来学习Android系统启动流程的最后一步:L...

2508
来自专栏熊二哥

Redis快速入门

由于工作慢慢从原来的少量用户的企业内部应用慢慢转化为了大量用户的企业内部应用或者直接转为了线上高并发应用,因而也渐渐的开始使用memcached、Redis等缓...

27210
来自专栏偏前端工程师的驿站

.Net魔法堂:log4net详解

一、作用                              提供一个记录日志的框架,可以将日志信息记录到文件、控制台、Windows事件日志和数据库(M...

2125
来自专栏我的博客

AJAX的XMLHttpRequest

readyState属性 标识当前的XMLHttpRequest对象处于什么状态 0表示为未初始化,1表示准备发送状态,2表示已发送状态,3正在接收,4完成响应...

2744
来自专栏Danny的专栏

【MyBatis框架点滴】——MyBatis一对多查询

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

1983
来自专栏冷冷

【springboot】 springboot 整合mybatis-plus

springboot整和mybatis-plus 整合步骤 1.pom.xml 添加mp依赖 <!-- mybatis-plus begin --> <depe...

4869
来自专栏编程坑太多

requests库使用方式

1474
来自专栏开发技术

spring集成mybatis实现mysql读写分离

       在网站的用户达到一定规模后,数据库因为负载压力过高而成为网站的瓶颈。幸运的是目前大部分的主流数据库都提供主从热备功能,通过配置两台数据库主从关系,...

1561
来自专栏安富莱嵌入式技术分享

【RL-TCPnet网络教程】第40章 RL-TCPnet之TFTP客户端(精简版)

本章节为大家讲解RL-TCPnet的TFTP客户端应用,学习本章节前,务必要优先学习第38章的TFTP基础知识。有了这些基础知识之后,再搞本章节会有事半功倍的效...

731
来自专栏极客慕白的成长之路

光棍节程序员闯关秀过关攻略

查看源代码,发现a标签的颜色和背景色一样,导致了我们看不到a过关地址,方法很简单,直接复制源代码中的key即可,或者ctrl+a然后单击进入下一关即可

1275

扫码关注云+社区

领取腾讯云代金券