AJAX

来源：互联网发布：c语言查找最长单词编辑：程序博客网时间：2024/06/18 08:43

最近做项目用到了AJAX和JASON，现来小结。

一、Ajax：（Asynchronous JavaScript And XML）指异步 JavaScript 及 XML

不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS新用法。

1、Ajax：只刷新局部页面的技术

JavaScript：更新局部的网页

XML：一般用于请求数据和响应数据的封装

XMLHttpRequest对象：发送请求到服务器并获得返回结果（Ajax技术的核心，它提供了异步发送请求的能力）。

CSS：美化页面样式

异步：发送请求后不等返回结果，由回调函数处理结果

2、常用方法与属性：

open(method,URL,async)

建立与服务器的连接 method参数指定请求的HTTP方法,典型的值是GET或POST ,URL参数指请求的地址 ,async参数指定是否使用异步请求，其值为true或false

setRequestHeader(header,value) 设置请求的头信息

send(content) 发送请求,content参数指定请求的参数

onreadystatechange：指定回调函数 事件处理器

readyState: XMLHttpRequest的状态信息

就绪状态码

说明

XMLHttpRequest对象没有完成初始化

即：刚刚创建。

XMLHttpRequest对象开始发送请求

调用了open方法，但还没有调用send方法。请求还没有发出

XMLHttpRequest对象的请求发送完成

send方法已经调用，数据已经提交到服务器，但没有任何响应

XMLHttpRequest对象开始读取响应，还没有结束

收到了所有的响应消息头，但正文还没有完全收到

XMLHttpRequest对象读取响应结束

一切都收到了

status：HTTP的状态码

状态码

说明

200

服务器响应正常

400

无法找到请求的资源

403

没有访问权限

404

访问的资源不存在

500

服务器内部错误

responseText：获得响应的文本内容

responseXML：获得响应的XML文档对象 documednt

注：就绪状态是4而且状态码是200，才可以处理服务器数据

示例程序：验证用户名是否存在

<script type="text/javascript" src="js/ajax.js"></script><script type="text/javascript">function checkName(){//得到用户输入的用户名        var txt = document.getElementsByName("username")[0];        var name = txt.value;                var req = getXMLHttpRequest();////1.得到XMLHttpRequest对象                //4.当服务器端返回数据时的处理方式--回调        req.onreadystatechange=function(){                       //判断请求和响应是否成功                       if(req.readyState==4 && req.status==200){          //得到响应的数据          var span = document.getElementById("msg");          span.innerHTML = req.responseText;//获取服务器返回的数据//2.指明请求的服务器资源,创建了一个连接         }        };         //2.指明请求的服务器资源,创建了一个连接        req.open("get","${pageContext.request.contextPath}/servlet/FindNameServlet?name="+name);        req.send(null);//3.发送请求}</script><body>    <!-- 验证用户名是否存在,当文本框失去焦点时立刻验证 -->用户名<input type="text" name="username" onblur="checkName()"><span id="msg"></span></br>密码<input type="password" name="passwd"></br><input type="submit" value="注册"></body>

FindNameServlet中

//得到用户名String name = request.getParameter("name");System.out.println(name);//验证用户名是否存 在if("lisi".equals(name)){out.print("<font color='red'>用户名已被注册</font>");}else{out.print("<font color='green'>√</font>");}

附：一般置于WebRoot下js文件夹下ajax.js文件源码

function getXMLHttpRequest(){       var xmlhttp;if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}return xmlhttp;}

0 0