初学Ajax

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScriptXML标准通用标记语言的子集)。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

二.Ajax的关键元素

Ajax不是单一的技术,而是四种技术的集合

  • JavaScript                        JavaScript是通用的脚本语言,用来嵌入在某种应用中。Web浏览器中嵌入的JavaScript解释器允许用过程序与浏览器的很多内建功能交互。Ajax应用程序是使用JavaScript编写的。
  • CSS(层叠样式表)             CSS为Web页面元素提供了一种可重用的可视化样式的定义方法。它提供了简单而又强大的方法,以一致的方式定义和使用可视化样式。在Ajax应用中,用户界面的样式可以通过CSS独立修改。
  • DOM(文档对象模型)         DOM以一组可以使用JavaScript操作的可编程对象展现出Web页面的结构。通过使用脚本修改DOM,Ajax应用程序可以运行时改变用户界面,或者高效的重绘页面中的某个部分。
  • XMLHttpRequest对象         XMLHttpRequest对象允许Web程序员从Web服务器以后台活动的方式获取数据。数据格式通常是XML,但是也可以很好的支持任何基于文本的数据格式(XMLHttpRequest这个名字取得是在是很不恰当)。尽管XMLHttpRequest对于完成这件工作来说最为灵活和通用的工具,但还有其他方法也可以从服务器获取数据。

三.接下来我们讲解XMLHttpRequest对象

讲解之前先来熟悉一下它有哪些属性和方法和传统的有何差异?

下面的图解更直观的解释:

XMLHttpRequest一些常用属性:

当一个XMLHttpRequest对象被创立后,readyState属性标示了当前对象处于什么状态,可以通过对该属性的访问,来判读此次请求的状态然后做出相应的操作

1.responseText属性
responseText属性包含客服端接收到的HTTP响应的文本内容,当readyState属性为0、1或2时,responseText属性包含一个空字符串:当readyState属性值为3时,响应中包含客服端还没完成的响应信息;当readyState属性值卫4,responseText属性才包含完整的响应信息。
2.responseXML属性
只有当readyState属性为4,并且响应头部的Content-Type的MIME类型被指定为XML(text/xml或者application/xml)时,该属性才会有值并且被解析成一个XML文档,否则该属性为null。如果是回传的XML文档结构不良或者未完成响应回传,该属性也会为null。responseXML属性用来描述被XMLHttpRequest解析后的XML文档的属性。
3.status属性
status属性描述了HTTP状态代码,注意,仅当readyState属性值为3(正在接受中)或者4(已加载)时,才能对此属性进行访问。如果在readyState属性值小于3时,试图去读取status属性值,将引发一个异常。
4.statusText属性
statusText属性描述了HTTP状态代码文本,并且仅当readyState属性为3或者4才可用。当readyState属性为其他值时试图存取statusText属性将引发一个异常。

好了,接下来就切入真实例子当中吧!

(1)  index.jsp页面

<script type="text/javascript">

function checkUser(){

//获取页面上的输入数据

var value=document.getElementById("uname").value;

//创建路径

var url="ajaxServlet?name="+value;

//创建XMLHttpRequest对象

var xhr;

//能力检测  判断是否是IE浏览器

if(windown.XMLHttpRequest){

//非IE浏览器

xhr=new XMLHttpRequest();

}else{

//IE浏览器

xhr=new ActiveObject("Microsoft.XMLHTTP");

}

//建立一个请求  (请求方式,url,是否异步(默认为false))

xhr.open("get",url,true);

//在状态发生改变时发生

xhr.onreadystatechange=function(){

if(xhr.readystate==4&&xhr.status==200){

//获取回传的数据

var result=xhr.responseText;

document.getElementById("msg").innerText(result);

}

}

</script>

(2)  <body>

用户名:<input id="uname" onblur="checkUser()" /><span id="msg"></span>

</body>

(3)AjaxServlet书写

public AjaxServlet extends HttpServlet{

public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException

{

doPost(request,response);

}

public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException

{

String uname=request.getParamter("name");

if(admin.equals(uname)){

//把消息回送给页面

response.getWriter().write("已经注册");

}else{

response.getWriter().write("可以注册");

}

}

}

(4)web.xml

<servlet>

<servlet-name>AjaxServlet</servlet-name>

<servlet-class>cn.servlet.AjaxServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>AjaxServlet</servley-name>

<url-pattern>/ajaxServlet</url-pattern>

</servlet-mapping>

时间: 2024-10-12 14:09:54

初学Ajax的相关文章

初学Ajax(二)

$.get()和$.post() .load()方法是局部方法,因为它需要一个包含元素的jQuery对象作为前缀.而$.get()和$.post()是全局方法,无须指定某个元素.对于用途而言,.load()适合做静态文件的异步获取,而对于需要传递参数到服务器页面的,$.get()和$.post()更加合适. $.get()方法有四个参数,前面三个参数和.load()一样,多了一个第四参数type,即服务器返回的内容格式:包括xml.html.script.json.jsonp和text.第一个参

初学Ajax(一)

以下文字根据李炎恢——jQuery教程整理而成. Ajax全称为:“Asynchronous JavaScript and XML”(异步JavaScript和XML),它并不是JavaScript的一种单一技术,而是利用了一系列交互式网页应用相关的技术所形成的结合体.使用Ajax,我们可以无刷新状态更新页面,并且实现异步提交,提升了用户体验. Ajax概述 Ajax这个概念是由Jesse James Garrett在2005年发明的.它本身不是单一技术,是一串技术的集合,主要有: JavaSc

AJAX小问题

临时做个小项目,初学AJAX,遇到个小问题.网上搜到了.现在MARK一下. $.ajax({             type: "post",            url: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",            dataType:"json",            data: { User: username.value, PassWord: userpass.value },     

如何使用ajax实现网页无刷新以及简单掌握Json

本人初学ajax,写出本人ajax的一些浅薄的经验. ajax简称(异步JavaScript和XML).异步指的是当向浏览器发送一条请求,不需要等请求响应还可以继续发送若干条请求而且不会阻碍用户. ajax是与服务器交换数据并更新部分网页的技术,可是实现网页无刷新. 例如用ajax删除一跳信息,实现无刷新: Index视图: <script type="text/javascript"> function mysuccess(data) { //data就代表服务器响应给客

关于AJAX使用中出现中文乱码的问题

自己初学AJAX,遇到一个棘手的bug就是xmlHttp.open("get",url,false);url里面有中文,结果出现乱码.不过最后在百度,和诸位博主的帮助下,成功解决了. 解决方法: <SCRIPT language="JavaScript" type="text/javascript"> function query(){ var sname= document.queryForm.sname.value; var xm

jQuery Ajax请求 .net 一般处理程序

初学ajax 一个简单的功能,调试了2个小时,代码如下虽然成功了 但是有错误 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <

使用Ajax时[object%20object] 报错的解决方案

踩坑经过 最近初学Ajax,当我想把Ajax应用到自己项目中的时候,没有达到理想的效果,还报了如下错误: 点击图中报错,产生报错页面如下: 当时写的Ajax如下: // 提交修改密码表单 $("#changePasseword").click(function(){ $.post({ url: "${pageContext.request.contextPath }/ChangePasswordServlet", data:$("#changePasswo

ajax初学

//参数说明url:请求文件地址//fnSucc:请求成功执行的函数,请求成功的条件为readyState状态码为4:且status状态码为200,status状态为浏览器请求返回的状态码//在fnSucc中有一个参数,其来至于服务求返回的responseText,由于浏览器与服务器之间的数据传输涉及到安全及加密问题,readyState状态码为3时,浏览器需要对返回的数据进行处理//其包含返回解密等操作.//fnFaild函数是当请求发生错误才处理的函数,其有一个参数为服务器返回给浏览器错误的

AJAX初学第一天总结

AJAX:Asynchronous Javascript And XML 概念:是异步的JavaScript和XML  是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术 工作原理: AJAX的工作原理相当于在服务器端和用户端添加一个中间层(AJAX引擎),一些不需要刷新整个页面的请求(列如:验证)就由AJAX来实现 1.在客户端通过XMLHttpRequest对象发送请求给服务器(由javascript来实现) var xhr;try{ xhr=new XMLHttpRequest(