初识AJAX

​
​

活动地址：CSDN21天学习挑战赛

  

目录

 代码及效果

解析

---

通过AJAX即： Asynchronous JavaScript And XML 实现异步刷新

 代码及效果

1.创建一个动态web项目

 2.在webapp目录下准备一个JSP页面，叫做checkName.jsp用于校验提交的用户名是否存在。
如果提交的用户名是abc就打印存在，否则就可以使用。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>

<%
	String name = request.getParameter("name");
	
	if("abc".equals(name))
	    out.print("<font color='red'>已经存在</font>");
	else 
		out.print("<font color='green'>可以使用</font>");
	
%>

3.准备一个HTML文件命名为Text.html用于制作显示页面，并编写AJAX函数

<span>输入账号 :</span>
<input id="name" name="name" onkeyup="check()" type="text">  
<span id="checkResult"></span>

<script>
var xmlhttp;
function check(){
  var name = document.getElementById("name").value;
  var url = "checkName.jsp?name="+name;

  xmlhttp =new XMLHttpRequest(); 
  xmlhttp.onreadystatechange=checkResult; //响应函数
  xmlhttp.open("GET",url,true);   //设置访问的页面
  xmlhttp.send(null);  //执行访问
}

function checkResult(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
 
}
</script>

4.运行Text.html

解析

1.AJAX的请求过程

 2.创建XHR

创建XHR对象 XMLHttpRequest
XHR对象是一个javascript对象，它可以在用户没有感觉的情况下，就像背后运行的一根小线程一般，悄悄的和服务器进行数据交互
AJAX就是通过它做到无刷新效果的

<script>
var xmlhttp =new XMLHttpRequest(); 
document.write(xmlhttp);
</script>

3.设置响应函数

XHR对象的作用是和服务器进行交互，所以既会发消息给服务器，也能接受服务器返回的响应。
当服务器响应回来的时候，调用怎么处理呢？
通过 xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函数进行处理。

4.设置并发出请求

(1).通过open函数设置背后的这个小线程，将要访问的页面url

xmlhttp.open("GET",url,true);

(2).通过send函数进行实际的访问

xmlhttp.send(null);

null表示没有参数，因为参数已经通过“GET" 方式，放在url里了。
只有在用"POST"，并且需要发送参数的时候，才会使用到send。
类似这样：
xmlhttp.send("user="+username+"&password="+password)

5.处理相应信息

在checkResult 函数中处理响应

function checkResult(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200)  
     document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
}

xmlhttp.readyState 4 表示请求已完成
xmlhttp.status 200 表示响应成功
xmlhttp.responseText; 用于获取服务端传回来的文本
document.getElementById('checkResult').innerHTML 设置span的内容为服务端传递回来的文本