AJAX学习总结

最新推荐文章于 2022-05-14 21:50:42 发布

qq247890212

最新推荐文章于 2022-05-14 21:50:42 发布

阅读量1.7k

点赞数 1

本文链接：https://blog.csdn.net/qq247890212/article/details/8741468

版权

今天把AJAX学习了一下，由于以前也没咋接触过AJAX。写写学习的总结，留着以后看。

首先轻视一下敌人——AJAX就是DOM+JS+一个XMLHttpRequest对象。

AJAX是什么：主要就是异步刷新。简单理解就是一个页面不用全部刷新，页面中的某些部分就可以单独刷新而不影响页面其他地方。

AJAX原理：我们直接在浏览器上点刷新就是整个页面和后台交互一下整个页面都刷新。ajax是在浏览器上有一个ajax引擎（就是XMLHttpRequest对象）。我们想刷新页面哪一部分就把那一部分的内容送到一个ajax引擎中（XMLHttpRequest对象中）然后这个引擎去和后台交互（而不是整个页面去和后台交互）页面上该干什么还干什么，与上面刷新部分互不影响。这就是异步刷新。（注意，每个刷新部分对应一个ajax引擎。）

DOM和JS没什么可说的，所以AJAX就是主要搞懂XMLHttpRequest这个对象。

XMLHttpRequest是一个浏览器支持的对象。但是IE和其他内核浏览器获取此对象的方法不同。记住就行了，获取这个对象的方法很简单，方法也比较多。随便记一种：

获取到引擎之后就是将引擎发动。让他准备好和后台通信并返回信息。这就要了解XMLHttpRequest对象的属性和方法。主要属性包括:

1、readyState。这个属性返回所属对象和后台通讯时的状态值（number类型）。主要有五种状态，含义如下：

0：（未初始化）XMLHttpRequest对象已建立，但还没有初始化。（就是还没调用open（）方法。）

1：（初始化）XMLHttpRequest已经初始化，但是还没和服务器通信。（就是还没调用send（）方法。）

2：（发送数据）XMLHttpRequest调用了send（）方法，正在向服务器发送数据。

3：（接受部分数据）XMLHttpRequest调用了send（）方法并向服务器发送完了数据，正在接受服务器返回的数据。

4：（交互结束）XMLHttpRequest对象成功接收服务器返回的数据。

2、status。这个属性返回刷新时浏览器和服务器交互过程中http协议的交互状态（也是number类型）。常见的状态有以下几种：

200：交互成功。

400：请求错误，如语法错误。

404：找不到指定资源。

500：服务器内部产生错误。

502：服务器暂时不可用。

还有很多返回状态。见到的时候查下就行。

3、onreadystatechange。此属性相当于一个监听器。XMLHttpRequest的readyState发生改变的时候，此监听器就能得到一个反馈。

XMLHttpRequest的主要方法包括：

1、open('get/post',url,true.)。此方法是引擎启动，里面的参数表达的意思就是跟谁通信（url）以及通讯的方法(get/post)，最后一个参数true代表异步刷新。false代表同步刷

新，默认就是true（同步刷新好像在这用不到吧— —！）。

其中get/post没啥不好理解的，跟页面跳转传参是一个意思，就是get方法需要在url地址上加参数，post不用在url上显示。所以这个方法重点要研究的是url这个参数，首先

我也没研究太明白，反正看着能用就行。

其实url的写法就跟form里面的action的值是一样的，get方法的话就在url后面加上?name=value 。post的话就不用写出参数了，直接在调用send（）方法的时候再传。一会说

send（）。

作为一个菜鸟，你可能会见很多例子教程上的url都是***.do。而且<url-pattern>*.do</url-pattern>是这样的值，不是以’/‘开头的。至于这是什么意思刚开始我也蛋疼的很。后来

查了查才知道还是自己太年幼啊。这种url-pattern叫做拓展映射。平时以‘/‘开头的url-pattern叫做路径映射。都是url-pattern的映射方法而已。我没见过带拓展名的。所以不懂。推荐大家看看

http://hi.baidu.com/nwwolfhdy/item/aeaa27139ad06efe746a8424

这篇文章就懂了。

2、send（）。如果是get方法发送的话已经在url中传参了。所以只需发送send（null），就可以开始和后台通信了。如果是post方法发送的话。就需要在这里传参了。例如：

xhr.send('username=' +document.getElementById("username").value);。这句也没啥好解释的。

3、responseText：XMLHttpRequest.responseText用于返回服务器返回的信息。（只能是文本信息）

4、responseXML：同上用于返回服务器返回的信息。（是xml类型文件);

XMLHttpRequest对象主要用的就是以上的属性和方法。贴个例子代码解释一下：注册的时候写完用户名自动检测用户名是否可用的例子。

注册页面（register.jsp）:

<html>
<head>
<title>AJAX Test</title>

<script type="text/javascript">
function getXmlHttpRequest(){
var XHRequest = null;
if((typeof XMLHttpRequest)!='undefined'){
XHRequest = new XMLHttpRequest();
}else{
XHRequest = new ActiveXObject('Microsoft.XMLHttp');
}
return XHRequest;
}
//get方法发送的函数
function check_username(){
var xhr = getXmlHttpRequest();
xhr.open('get','check_username.do?username='+document.getElementById("username").value,true);
xhr.onreadystatechange = function(){
if(4 == xhr.readyState){
if(xhr.status == 200){
var txt = xhr.responseText;
$('username_msg').innerHTML = txt;
}else{
$('username_msg').innerHTML = '系统错误，稍后再试';
}
}else{
$('username_msg').innerHTML = '正在验证、、、';
}
};
xhr.send(null);
}
//post方法发送的函数。
function check_username2(){
var xhr = getXmlHttpRequest();
xhr.open('post','check_username.do',true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //注意用post方法一定要有这一句。
xhr.onreadystatechange = function(){
if(4 == xhr.readyState){
if(xhr.status == 200){
var txt = xhr.responseText;
$('username_msg').innerHTML = txt;
}else{
$('username_msg').innerHTML = '系统错误，稍后再试';
}
}else{
$('username_msg').innerHTML = '正在验证、、、';
}
};
xhr.send('username=' +document.getElementById("username").value);
}

</script>
</head>

<body>
This is AJAX test page. <br>
<form action="" method = "post">
用户名：<input name = "username" id = "user" onblur = "check_username2();" />
<span class = "s1" id = "username_msg"></span>
<input type = "submit" value = "确认" />
</form>

</body>
</html>

Servlet页面：（ActionServlet）

public class ActionServlet extends HttpServlet{
public void service(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException{
String uri = request.getRequestURI();
System.out.println(uri);
String path = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));

request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
if(path.equals("/check_username")){
String username = request.getParameter("username");
if(username.equals("aa")){
System.out.println("beizhanyong");
out.println("被占用了");
}else{
System.out.println("keyiyong");
out.println("可以使用");
}
}

out.close();
}
}

web-xml：文件

<servlet>
<servlet-name>ActionServlet</servlet-name>
<servlet-class>web.ActionServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ActionServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>

时间紧迫，后面的没详写。

有几点疑问，1.servlet配置文件中的url-pattern是怎么回事。

2.调用函数的时候check-username.do是什么意思。是不是可以随便配的。

qq247890212

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
AJAX学习总结

今天把AJAX学习了一下，由于以前也没咋接触过AJAX。写写学习的总结，留着以后看。首先轻视一下敌人——AJAX就是DOM+JS+一个XMLHttpRequest对象。AJAX是什么：主要就是异步刷新。简单理解就是一个页面不用全部刷新，页面中的某些部分就可以单独刷新而不影响页面其他地方。AJAX原理：我们直接在浏览器上点刷新就是整个页面和后台交互一下整个页面都刷新。ajax是在浏览器上
复制链接

扫一扫