Ajax的使用

来源：互联网发布：单片机呼吸灯编辑：程序博客网时间：2024/06/04 01:05

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它是一种技术，并不是指一种编程语言。

具体步骤：

1.创建XMLHttpRequest对象，XMLHttpRequest(XHR)对象是一个javascript对象，它可以在用户没有感觉的情况下，就像背后运行的一根小线程一般，悄悄的和服务器进行数据交互。

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

3.设置并发出请求，用open()方法

4.处理响应信息。

处理页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Ajax检查页面</title></head><body><%String name = request.getParameter("name");if ("abc".equals(name))out.print("<font color='red'>已经存在</font>");elseout.print("<font color='green'>可以使用</font>");%></body></html>

请求页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>初始页面</title><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></head><body><form action="checkName.jsp"><span>用户名：</span><input type="text" id="name" name="name" onkeyup="check()"><span id="checkResult"></span></form></body></html>

参考：

http://how2j.cn/k/ajax/ajax-stepbystep/466.html?p=11687(具体操作)

http://www.runoob.com/ajax/ajax-tutorial.html(详细的概念介绍)

阅读全文

0 0