一、什么是ajax？有什么作用？
ajax中文翻译为：异步的js和xml。用于网页向服务器发送请求（可支持同步和异步2种方式），接收服务器响应后的处理数据。
注：同步，网页发送请求后，锁定当前网页（不能继续操作）；异步，网页发送请求后，可以继续操作网页发送请求。
二、如何获得ajax对象？
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ajax</title>
</head>
<body>
<a href="javascript:;" onclick="alert(getXhr())">获取ajax对象</a>
<script type="text/javascript">
function getXhr() {
var xhr;
xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");
return xhr;
}
</script>
</body>
</html>
这段代码的逻辑是：点击页面中的链接时，调用onclick事件中的getXhr()方法，返回一个xhr对象。
这里要注意的是href="javascript:;"这句代码代表点击链接时什么也不执行（跳转）。
for example:
<a href="javascript:;">点击链接后不跳转</a>
三、使用XMLHttpRequest（xhr）对象发送get请求？
步骤：
1、获得XMLHttpRequest对象；
2、为XMLHttpRequest绑定回调函数；
3、创建请求；
4、发送请求；
前端：
<a href="javascript:;" onclick="getText()">获取服务端文本数据</a>
<script type="text/javascript">
function getXhr() {
var xhr;
xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");
return xhr;
}
</script>
<script type="text/javascript">
function getText() {
var xhr = getXhr();
xhr.onreadystatechange = function () {
if(xhr.readyState==4&&xhr.status==200){
var txt = xhr.responseText;
alert(txt);
}
};
xhr.open("get","get_text.do",true);
xhr.send(null);
}
</script>服务端：
package controller;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class ActionServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String uri = request.getRequestURI();// /test/get_text.do
System.out.println(uri);
String path = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
if(path.equals("/get_text")){
out.println("这是来自服务端的数据");
}
out.close();
}
}<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd" > <web-app> <display-name>Archetype Created Web Application</display-name> <servlet> <servlet-name>ActionServlet</servlet-name> <servlet-class>controller.ActionServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ActionServlet</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> </web-app>
效果图：
四、使用XMLHttpRequest（xhr）对象发送post请求？
步骤：
1、获得XMLHttpRequest对象；
2、为XMLHttpRequest绑定回调函数；
3、创建请求；
4、手动添加请求头
5、发送请求；name-value
<a href="javascript:;" onclick="();">post请求方式获取服务端数据</a>
<script type="text/javascript">
function getXhr() {
var xhr;
xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");
return xhr;
}
</script>
<script type="text/javascript">
function () {
var xhr = getXhr();
xhr.onreadystatechange = function () {
if(xhr.readyState==4&&xhr.status==200){
var text = xhr.responseText;
alert(text);
}
};
xhr.open("post","post_text.do",true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send("name=zhoujie");
}
</script>使用链接的方式提交请求为get请求！！所以点击链接返回不了数据。
<input type="button" onclick="getPostData()" value="提交post请求"/>
<script type="text/javascript">
function getXhr() {
var xhr;
xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");
return xhr;
}
</script>
<script type="text/javascript">
function getPostData() {
var xhr = getXhr();
xhr.onreadystatechange = function () {
if(xhr.readyState==4&&xhr.status==200){
var text = xhr.responseText;
alert(text);
}
};
xhr.open("post","post_text.do",true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send("name=1");
}
</script>package controller;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class ActionServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String uri = request.getRequestURI();// /test/get_text.do
System.out.println(uri);
String path = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
if(path.equals("/get_text")){
out.println("这是来自服务端的数据");
}else if(path.equals("/post_text")){
String name = request.getParameter("name");
out.println(name);
}
out.close();
}
}<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd" > <web-app> <display-name>Archetype Created Web Application</display-name> <servlet> <servlet-name>ActionServlet</servlet-name> <servlet-class>controller.ActionServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ActionServlet</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> </web-app>
WHY??
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦