常见报错:
404 - Not Found-请求的资源(网页等)不存在
500 -Internal Server Error- 内部服务器错误
目录
500 -Internal Server Error- 内部服务器错误
我们一般发送请求的方式有四种:
- 地址栏
- a标签
- form表单
- location.href或window.open()
但是以上请求都会实现跳转页面等操作。那我们要想有一个既能提交数据,又能不跳转页面并更新网页内容,有没有可能呢,接下来我们学习的AJAX就拥有这个功能
AJAX介绍:
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
异步:整个页面不会全部刷新,只有某个局部在刷新eg:验证用户名是否存在
注意
1:使用ajax发送请求,页面是 不可以通过后台跳转! ! !
如果需要跳页面,也是通过我们前端的JS来跳转,不可能通过servlet跳转
2:ajax和form表单不能同时使用。他们之间是相互冲突的。
ajax:不跳页面。
form:一定会跳。
JS原生的ajax:
XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
使用方式:
1.向后台发送请求
let xhr=new XMLHttpRequest();
2. 设置请求的方式和url地址
可以设置请求是get或post,url地址可以传值
xhr.open("post","valid.do")
//或
xhr.open("get","valid.do?username="+username);
3. 发送请求(请求体,只有post有请求体)
Post请求需要配置请求头信息
//post请求:发送请求头,send发送请求体
xhr.setRequestHeader("Content-type","application/x-ww-form-urlencoded")
xhr.send("username="+username+"&password=123456")
//get请求:没有请求体,设置null
xhr.send(null);
4.指定xhr状态变化的处理函数
.onreadystatechange=function(){}
通过responseText获取对应的响应体
xhr.onreadystatechange=function(){
if(this.readyState == 4){
//通过xhr的responseText获取到对应的响应体
console.log(this.responseText);
}
}
我们看到有一个判定条件:this.readyState==4
这个是怎么判定的,为什么要等于四呢?
readyState是XMLHttpRequest对象的一个属性,用来标识当前XMLHttpRequest对象处于什么状态。readyState总共有5个状态值,分别为0~4,每个值代表了不同的含义。
0:xhr被创建,方法未被调用。对象还没完成初始化
1:open被调用,开始发送请求,建立连接
2:send被调用,发送完成,可以获取状态行和响应头
3:可以拿到响应体,响应体加载中,进行解析
4:响应体下载完成,响应结束,可以直接使用responseText获取内容
JQuery的AJAX
$(function(){
$("#va").click(function(){
let username = $("#username").val();
// 完整写法
$.ajax({
url:"va.do",
type:"post",
//以键值对存储
data:{"username":username,"password":password},
//成功了会走这个
success:function(res){
console.log(res);
},
//失败了会走这个
error:function(res){
console.log(res);
}
})
})
})
简易发送GET请求
data是后台响应回来的响应体
$.get("valid.do?username=" + username,function (data) {
//传回来的参数是data
});
简易发送POST请求
$.post("valid.do","username=" + username,function (data) {
//传回来的参数是data
});
表单数据如何进行提交呢:
利用formData构建一个表单数据对象:
let formData = new FormData();
formData.append("username",username);
formData.append("password",password);
之后在data里写formData;{data:formData,}
JSON
json是JavaScript对象表示法,用来传递对象的,毕竟单纯的js是不可能有对象这个概念的
语法:
[
{ "name":"pike" , "url":"www.dream.com" },
{ "name":"yeah" , "url":"www.google.com" },
{ "name":"aoli" , "url":"www.baidu.com" }
];
对象:
{ "name":"potato", "age":10, "sex":null }
Vue的AJAX
在vue里对原生ajax进行了封装:axios;
需要导包:axios.min.js
axios发送get请求:
请求中如果有参数,还是一个默认的以文档里的形式发送,和之前的任何一种请求方式没有任何区别。
axios发送post请求:
请求中如果有参数,会把post请求的请求体转成json串,然后再发给后台。
const app = new Vue({
el:"#app",
data:{},
methods:{
post(){
// 发送post请求
axios.post("vue.do",{
"username":"xiaoqiang",
"password":"666666"
}).then(function(response){
console.log(response);
});
},
get(){
// 发送get请求
axios.get("vue.do?username=admin&password=666666").then(function(response){
console.log(response);
console.log(response.data);
}).catch(function(err){
console.log(err);
});
}
},
});
但是在后台:
request.getParameter()方法只能接收默认的文档流中的参数,接不了json串
怎么获取json传过来的串呢:
一:从request中获取了一个流,缓冲字符输入流
1、get请求,后台没有对应的对象来封装,不能有私密数据。
2、post请求,后台都是有对象跟着的。username,password-----User
id,name,age,gender,email-----------Student
BufferedReader reader = request.getReader();
String line = reader.readLine();
二:封装对象的前提:
json串中的数据的key和对象的属性名要一致。是根据set方法的名封装的。
User user = JSON.parseObject(line, User.class);
HTTP 状态码
当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含 HTTP 状态码的信息头(server header)用以响应浏览器的请求。
HTTP 状态码的英文为 HTTP Status Code
下面是常见的 HTTP 状态码:
200 - 请求成功
301 - 资源(网页等)被永久转移到其它URL
404 - Not Found-服务器无法根据客户端的请求找到资源(网页)。通过此代码,网站设计人员可设置"您所请求的资源无法找到"的个性页面
500 - Internal Server Error-服务器内部错误,无法完成请求
总结
AJAX就算是进入Java的重点知识段,老师讲的很好,可惜我的理解能力较差对着代码依然无从下手,不知道代码它的作用、功能,也不知道下一步如何走,脑子一团糟,继续加油理解吧。大家在测试中一定经常碰见404、500,这是很正常的,报错先看控制台,前端就f12看开发中工具,最后再查看路径,相信你一定可以解决好问题的