一：什么是ajax?
ajax：异步的javascript和xml，用于完成网页局部刷新功能（修改少量数据只用局部刷新，不用再整个网页重新加载）；
xml的作用：1.是用于数据传输，但现在都在使用json
2.用于存取数据（已经不用），被数据库取代
3.用于写配置文件，现在还在少量使用，逐渐被注解取代
注意：ajax请求不能写跳转（1.会报错。2.把跳转的页面当作字符串传回去）
二：使用原生的方式实现ajax
1、创建一个ajax对象
从ajax对象xhr创建开始，它的所有操作都被监听
xhr本身是有一个状态的概念，这个状态：readystate
0(为初始化)：对象已经建立，但是尚未初始化（尚未调用open）方法
1(初始化)：对象已建立，尚未调用send方法
2(发送数据)：send方法已经调用，但是当前的状态及http头未知
3(数据发送中)：已接收部分数据，因为响应及http头不全，这时通过responsebody和responsetext获取部分数据会出现错误
4(完成）：数据接收完毕，此时可以通过responsebody和responsetext获取完整的回应数据
//内置了一个类：xmlhttprequest;兼容ie需要创建activexobject //在js中，所有变量定义都使用var var xhr= new xmlhttprequest();
2、准备请求 .open(methodtype（请求类型），methodurl（请求到后端的地址），issys（是否异步）)：请求类型：get/post。是否异步：默认为true
注意：如果要传参的话，get请求在路径中传参数，post请求在send中传参
//get请求
xhr.open("get","/地址?传到后台的参数");
//post请求
xhr.open("post","/login");
//如果是post请求，必须设置请求头的类型，后台才能够接收到前台传过去的相应的数据;当然，get请求不需要设置
xhr.setrequestheader("content-type","application/x-www-form-urlencoded");
3、准备监听ajax相应的状态变化：on(监听)，readystate(状态) ，change(匿名方法）
我要评论xhr.onreadystatechange = function() {
//xhr.status：请求状态（200表示成功）
//xhr.readystate：获取到响应的值：（当它的状态等于4-->整个请求已经完成，你就可以获取数据了 ）
if(xhr.status==200 && xhr.readystate == 4){
//获取相应的值
var result= xhr.responsetext;
//放到相应的位置
document.getelementbyid("写id").imnnerhtml = result;
}
}
4、发送请求 .sed(varbody)---->varbody：post请求传参要写（key=value&key=value&...);get请求不用写
//get请求
xhr.sed();
//post请求
xhr.send("username="+username+"&pwd="+pwd);
get请求前端完整的html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生ajax测试</title>
<script type="text/javascript">
function gettime(){
//1.创建ajax对象
var xhr= new xmlhttprequest();
//2.准备请求（请求类型，后端地址）：此处请求并没有传数据出去，只是发送了一个请求
xhr.open("get","/gettime");
//3.监听ajax的状态变化
xhr.onreadystatechange= funtion(){
if(xhr.status==200 && xhr.readystate==4){
var result = xhr.responsetext;
//放到相应的位置
document.getelementbyid("time").innerhtml = result;
}
}
//4.发送请求
xhr.send();
}
</script>
</head>
<body>
<button onclick="gettime()">得到时间</button><span id="time"></span>
</body>
</html>
get请求后端的java代码:
package ajax.servlet;
import java.io.ioexception;
import java.util.date;
import javax.servlet.servletexception;
import javax.servlet.annotation.webservlet;
import javax.servlet.http.httpservlet;
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;
@webservlet("/gettime")//前端请求过来的地址
public class gettimeservlet extends httpservlet {
@override
protected void service(httpservletrequest req, httpservletresponse resp) throws servletexception, ioexception {
//用于前后台交互数据测试
string date = new date().tolocalestring();
//通过响应返回相应的数据
resp.getwriter().print(date);
}
}
post请求前端完整的html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>insert title here</title>
<script type="text/javascript">
function login(){
//1.获取到用户名与密码
var username = document.getelementbyid("username").value;
var pwd = document.getelementbyid("pwd").value;
//2.创建ajax对象
var xhr= new xmlhttprequest();
//3.准备请求（请求类型，后台地址）
xhr.open("post","/login");
//如果是post请求，必须设置请求头的类型，后台才能够接收到前台传过去的相应的数据
xhr.setrequestheader("content-type","application/x-www-form-urlencoded");
//3.监听ajax的状态变化
xhr.onreadystatechange= function(){
if(xhr.status==200 && xhr.readystate==4){
var result = xhr.responsetext;
// responsetext获取到的都是字符串
if(result == "true"){//登录成功
window.location.href="https://www.baidu.com";
}else{//登录失败
document.getelementbyid("erspan").innerhtml="用户名或密码错误！";
}
}
}
//4.发送请求:post请求必须通过.send()传数据到后台
xhr.send("username="+username+"&pwd="+pwd);
}
</script>
</head>
<body>
<span id="erspan"></span>
<form action="/login" method="post">
用户名：<input type="text" name="username" id="username" /> <br />
密码<input type="text" name="pwd" id="pwd" /><br />
<input type="button" value="ajax提交" onclick="login()" />
</form>
</body>
</html>
post请求后端的java代码:
package ajax.servlet;
import java.io.ioexception;
import javax.servlet.servletexception;
import javax.servlet.annotation.webservlet;
import javax.servlet.http.httpservlet;
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;
@webservlet("/login")
public class loginservlet extends httpservlet{
@override
protected void service(httpservletrequest req, httpservletresponse resp) throws servletexception, ioexception {
//字符集编码，必须写，不然中文会乱码
req.setcharacterencoding("utf-8");
resp.setcontenttype("utf-8");
//接收到前台传过来的值
string username = req.getparameter("username");
string pwd = req.getparameter("pwd");
//system.out.println(username+":"+pwd);
//测试
if("流星".equals(username) && "123".equals(pwd)){
//向前端返回boolean类型的true,但前端接收到的是string类型
resp.getwriter().print(true);
}else{
resp.getwriter().print(false);
}
}
}
如对本文有疑问， 点击进行留言回复！！
egg项目npm/cnpm出错Connect timeout
网友评论