ajax=1,ajax专栏1
一、什么是ajax？有什么作用？
ajax中文翻译为：异步的js和xml。用于网页向服务器发送请求(可支持同步和异步2种方式)，接收服务器响应后的处理数据。
注：同步，网页发送请求后，锁定当前网页(不能继续操作)；异步，网页发送请求后，可以继续操作网页发送请求。
二、如何获得ajax对象？
ajax
获取ajax对象
function getXhr() {
var xhr;
xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");
return xhr;
}
这段代码的逻辑是：点击页面中的链接时，调用onclick事件中的getXhr()方法，返回一个xhr对象。
这里要注意的是href="javascript:;"这句代码代表点击链接时什么也不执行(跳转)。
for example:点击链接后不跳转
三、使用XMLHttpRequest(xhr)对象发送get请求？
步骤：
1、获得XMLHttpRequest对象；
2、为XMLHttpRequest绑定回调函数；
3、创建请求；
4、发送请求；
前端：获取服务端文本数据
function getXhr() {
var xhr;
xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");
return xhr;
}
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);
}
服务端：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();
}
}web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
Archetype Created Web Application
ActionServlet
controller.ActionServlet
ActionServlet
/
效果图：
四、使用XMLHttpRequest(xhr)对象发送post请求？
步骤：
1、获得XMLHttpRequest对象；
2、为XMLHttpRequest绑定回调函数；
3、创建请求；
4、手动添加请求头
5、发送请求；name-valuepost请求方式获取服务端数据
function getXhr() {
var xhr;
xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");
return xhr;
}
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");
}
使用链接的方式提交请求为get请求！！所以点击链接返回不了数据。
function getXhr() {
var xhr;
xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");
return xhr;
}
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");
}
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();
}
}web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
Archetype Created Web Application
ActionServlet
controller.ActionServlet
ActionServlet
/
WHY??
相关知识
基于javaweb+jsp的宠物领养信息管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Bootstrap Ajax)
基于ASP.NET技术宠物系统的研究与设计
基于SSM技术的宠物寄存系统设计与实现
中美突破性合作 国际亚洲兽医大会暨展览会 赞助商、演讲嘉宾和参展商名单公布
Http POST 提交数据的四种方式解析
1＝1
1=1
1=1=1???????
tp5.1 => 预约装车系统
【专栏小课堂】4类宠物专栏的内容制作要求
网址: ajax=1,ajax专栏1 https://m.mcbbbk.com/newsview216763.html
| 上一篇: 宠物食谱——鲜食 |
下一篇: 自制宠物蛋黄粉 |
