大家好,又见面了,我是你们的朋友全栈君。
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)
是一种基于浏览器的XMLHttpRequest对象实现的创建交互式网页应用的网页开发技术。
用JS创建XMLHttpRequest对象并调用其方法实现基本的Ajax请求:
xmlhttp = new XMLHttpRequest(); //创建XMLHttpRequest对象
xmlhttp.onreadystatechange = f; //设置请求完成后的回调函数
xmlhttp.open(“GET”, url, true); //打开指定的url
xmlhttp.send(); //发送请求
这发送的是一个GET请求,如果要发送POST请求要记得设置请求投(GET请求数据可以通过url附加,POST请求可以发送时附加)
xmlhttp = new XMLHttpRequest(); //创建XMLHttpRequest对象
xmlhttp.onreadystatechange = f; //设置请求完成后的回调函数
xmlhttp.open(“POST”, url, true); //打开指定的url
xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”) //设置请求头
xmlhttp.send(data); //发送请求,并附加数据
注意:回调函数务必在发送请求前设置
回调函数的内容:
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var data = xmlhttp.responseText;
var test = document.getElementById(“test”);
test.innerHTML += data + “
“;
}
}
其中xmlhttp.readyState表示请求执行的状态(4表示请求完成),而xmlhttp.status表示http的响应返回状态码。
下面写一个小例子实现Ajax向后端请求数据:
服务端代码(Java实现)
@WebServlet(name = “AddServlet”, urlPatterns = “/AddServlet”)
public class AddServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.getWriter().write(“helloworld”);
}
}
客户端代码:
var xmlhttp;
function loadGetHttp(url, f) {
xmlhttp = new XMLHttpRequest(); //创建XMLHttpRequest对象
xmlhttp.onreadystatechange = f; //设置请求完成后的回调函数
xmlhttp.open(“GET”, url, true); //打开指定的url
xmlhttp.send(); //发送请求
}
function loadPostHttp(url, data, f) {
xmlhttp = new XMLHttpRequest(); //创建XMLHttpRequest对象
xmlhttp.onreadystatechange = f; //设置请求完成后的回调函数
xmlhttp.open(“POST”, url, true); //打开指定的url
xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”) //设置请求头
xmlhttp.send(data); //发送请求,并附加数据
}
function cfunc() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var data = xmlhttp.responseText;
var test = document.getElementById(“test”);
test.innerHTML += data + “
“;
}
}
}
window.onload = function () {
var button = document.getElementById(“button”);
button.onclick = function () {
loadGetHttp(“AddServlet”, cfunc);
}
}
这里写了两个通用的函数loadGetHttp和loadPostHttp来实现请求的加载,这样在使用时只要传人对应的URL和回调函数即可。
这里只是简单的举例子,实际使用中会将数据打包成XML或JSON格式,也有很多方便的实现Ajax的类库(如Jquery、EXT.JS……)
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/156366.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...