初涉ajax+jsp

levysnail

2017-11-23

关注关注

想要学习基础的ajax知识可以到下面这个网站学习：

w3 school 学习

什么是ajax?

AJAX = 异步 JavaScript 和 XML。

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

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

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

下面是ajax基础：

XMLHttpRequest 是 ajax 的基础（所有的新版浏览器均支持XMLHttpRequest对象）

老版的 IE5 和 IE6使用 ActiveX 对象（早就没人用了）；

想要使用ajax首先要在网页的js方法里新建一个对象

var xmlhttp=new XMLHttpRequest();

如果需要将请求发送到服务器，我们使用该对象的open和send方法

通过以上两种发放，我们可以以两种方式发送请求给服务器

/*open方法的第三个参数表示是否异步,AJAX指的是异步，所以参数必须为true*/
//一个简单的GET请求
xmlhttp.open("GET","demo.jsp？data="+data,true);
xmlhttp.send();

//一个简单的POST请求
xmlhttp.open("POST","demo.jsp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("data=xxx");

当使用异步时，会发生onreadystatechange事件，当处于服务器已经响应（就绪状态时）

xmlhttp.readyState==4&&xmlhttp.status==200

当服务器已经响应，将通过responseText,responseXML两个属性获取服务器字符串形式或XML形式的信息

下面是一个简单的例子：

test.html

<html>
<head></head>
<body>
<label>nickname:</label><input type="text" id="nic" value="" name="nick" onchange="check(this.value)" /><label id="nicktips" ></label><br/>
</body>
<script type="text/javascript">
   var xmlhttp;
   function check(str){
          //检测字符串是否为空
	   if (str.length==0)
	   { 
	     document.getElementById("nicktips").innerHTML="";
	     return;
	   }
	   
	 //新建对象发送请求
	   xmlhttp=new XMLHttpRequest(); 
	  //监听服务器响应
	   xmlhttp.onreadystatechange=showstate;
	   xmlhttp.open("GET","check.jsp?nickname="+str,true);
	   xmlhttp.send(null);
	  
	   
	   
   }
 	  function showstate()
   { //服务器完成响应
       if (xmlhttp.readyState==4 && xmlhttp.status==200)
       {
    	   document.getElementById("nicktips").innerHTML=xmlhttp.responseText;
       }else{
        //服务器还未完成相应
    	  document.getElementById("nicktips").innerHTML="<font color=red>正在检测....</font>";
       }
       
   }
</script>
</html>

后台（没有连接数据库）：

check.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
System.out.println("ttttttttttt"+request.getParameter("nickname"));
response.getWriter().println("<font font=green>test</font>");%>

ajax xmlhttp