Ajax

最新推荐文章于 2022-06-19 13:50:53 发布

believeit001

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量902

点赞数

分类专栏： java Web 文章标签： ajax java 智能检索

本文链接：https://blog.csdn.net/lv836735240/article/details/29184155

版权

java 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

Web

11 篇文章 0 订阅

订阅专栏

ajax全称:Asynchronous JavaScript and XML

ajax是一门老技术

大家都知道ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。

1.使用CSS和XHTML来表示。

2. 使用DOM模型来交互和动态显示。

3.使用XMLHttpRequest来和服务器进行异步通信。

4.使用javascript来绑定和调用。

在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用的，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它。

ajax原理和XmlHttpRequest对象

ajax原理图

　　Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。

　XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

　所以我们先从XMLHttpRequest讲起，来看看它的工作原理。

　首先，我们先来看看XMLHttpRequest这个对象的属性。

　　它的属性有：

　　onreadystatechange 每次状态改变所触发事件的事件处理程序。

　　responseText 从服务器进程返回数据的字符串形式。

　　responseXML 从服务器进程返回的DOM兼容的文档数据对象。

　　status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）

　　status Text 伴随状态码的字符串信息

　　readyState 对象状态值

　　　　0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

　　　　1 (初始化) 对象已建立，尚未调用send方法

　　　　2 (发送数据) send方法已调用，但是当前的状态及http头未知

　　　　3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

　　　　4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

　　但是，由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest对象的方法。

var XMLHttpReq;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
XMLHttpReq=new XMLHttpRequest();
}
}

function processResponse()
{
if( XMLHttpReq.readyState==4 && XMLHttpReq.status==200)
{

clearSuggest();
var tips= XMLHttpReq.responseXML.getElementsByTagName("res");

//servlet中response.setContentType("text/xml;charser=UTF-8");

//如果是普通的html中的值则为text/html
if(tips.length!=0)
{
for( i=0;i<tips.length;i++)
{
title=tips[i].firstChild.nodeValue;//参考DOM解析XML
//解析返回的res节点数组，取得<res></res>之间存入title的变量值
createSuggest();
}
displaySuggest();
}
else
{
clearSuggest();
hiddenSuggest();
}
}
else
{
window.alert("您所请求的页面有异常");
}
}

function sendRequest()
{
var info=document.getElementById("title").value;
var url="./search?info="+info;//注意这是servlet的映射路径
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange=processResponse;
XMLHttpReq.send(null);
}

　如上所示，函数首先检查XMLHttpRequest的整体状态并且保证它已经完成（readyStatus=4），即数据已经发送完毕。然后根据服务器的设定询问请求状态，如果一切已经就绪（status=200），那么就执行下面需要的操作。

对于XmlHttpRequest的两个方法，open和send，其中open方法指定了：

a、向服务器提交数据的类型，即post还是get。

b、请求的url地址和传递的参数。

c、传输方式，false为同步，true为异步。默认为true。如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式，在某些页面中，可能会发出多个请求，甚至是有组织有计划有队形大规模的高强度的request，而后一个是会覆盖前一个的，这个时候当然要指定同步方式。

Send方法用来发送请求。

实例：

用户名验证

servlet//这里获得是html中的属性

response.setContentType("text/html;charset=UTF-8");
String user=request.getParameter("username");
PrintWriter out = response.getWriter();
Connection con=null;
try{
String sql="select * from user where username=?";
DbConnection db=new DbConnection();
con=db.getConnection();
PreparedStatement pstmt=con.prepareStatement(sql);
pstmt.setString(1, user);
ResultSet rs=pstmt.executeQuery();
if(rs.next())
{
out.write("对不起，您所注册的用户名已存在");
}
else
{
out.write("恭喜您，该用户可以使用");
}
return;

}

实例2

智能匹配

sevlet//xml方式

String info=request.getParameter("info");
System.out.println(info);
response.setContentType("text/xml;charser=UTF-8");
PrintWriter out = response.getWriter();
out.println("<response>");
String sql="select * from infolist where infotitle like?";
DbConnection db=new DbConnection();
Connection conn=null;
conn=db.getConnection();
try {
PreparedStatement ps=conn.prepareStatement(sql);
ps.setString(1, info+"%");
ResultSet rs=ps.executeQuery();
while(rs.next())
{
//out.println("<res>"+rs.getString("infotitle")+"</res>");
out.println("<res title='"+rs.getString("infotitle")+"'>"+rs.getString("infotitle")+"</res>");
//System.out.println("<res>"+rs.getString("infotitle")+"</res>");
System.out.println("<res title='"+rs.getString("infotitle")+"'>"+rs.getString("infotitle")+"</res>");
}
rs.close();
ps.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
System.out.println(e.getMessage());
}
out.println("</response>");
out.close();
}