ajax get请求

112 阅读 0 评论 74 点赞

我是靠谱客的博主懦弱母鸡，这篇文章主要介绍ajax get请求，现在分享给大家，希望可以做个参考。

Ajax获取请求的步骤

第一步：创建Ajax的核心对象：XMLHttpRequest对象
new 一个XMLHttpRequest对象
这对象是浏览器内置对象，可以直接使用。
第二步：注册回调函数。
调用onreadystatechange的回调函数
程序执行到这里的时候，后面的回调函数并不会执行，只是将函数注册到XMLHttpRequest对象。
等XMLHttpRequest对象的readySate发生改变的时候，后面的回调函数会执行。
XMLHttpRequest的对象在请求和响应的过程中，该对象的readyState状态从0-4
0：请求未初始化
1：服务器已经建立
2：请求已接受
3：请求处理中
4：请求已经完成
第三步：开启浏览器和服务器之间的通道。
调用open函数。
函数中又三个参数
第一个：请求的方式 POST / GET
第二个：url地址
第三个：ture 代表异步，false 同步
第四步：发送Ajax请求
调用send方法

Ajax的get案列

1.以ajax请求发送用户名，并显示服务端的消息

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
function checkUsername(username){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var s = xhr.responseText;
var name=document.getElementById("nameTipMsg");
name.innerHTML= s;
}else{
alert(xhr.status);
}
}
}
xhr.open("GET","User.do?username="+username,true);
xhr.send();
}
</script>
用户名：<input type="text" name="username" onblur="checkUsername(this.value)"/><span id="nameTipMsg"></span><br>
密码:<input type="password" name="password"/><br>
</body>

2.配置web.xml(配置访问路径)

复制代码

1
2
3
4
5
6
7
8
9
<servlet>
<servlet-name>User</servlet-name>
<servlet-class>com.ajax.User</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>User</servlet-name>
<url-pattern>/User.do</url-pattern>
</servlet-mapping>

3.验证ajax请求的参数，发出响应给客户端

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class User extends HttpServlet{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String username
=request.getParameter("username");
if("admin".equals(username)){
out.print("用户名已存在");
}else{
out.print("用户名已注册");
}
}
}