https://www.w3school.com.cn/js/index.asp
总结步骤
1.创建HttpRequest对象
我们需要判断浏览器，不同的浏览器创建HttpRequest对象的时候，是使用的对象不同
window.XMLHttpRequest–IE7+,firefox,Chrome,Opera,Safari浏览器–XmlhttpRequest—IE5，IE6浏览器–ActiveXobject（”Microsoft.XMLHTTP”);
2.请求发送以后的处理动作
XMLHttpRequest对象属性
|
属性 |
描述 |
|
onreadystatechange |
定义当 readyState 属性发生变化时被调用的函数 |
|
readyState |
保存 XMLHttpRequest 的状态。 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪 |
|
responseText |
以字符串返回响应数据 |
|
responseXML |
以 XML 数据返回响应数据 |
|
status |
返回请求的状态号 200: “OK” 403: “Forbidden” 404: “Not Found”
如需完整列表请访问 |
|
statusText |
返回状态文本（比如 “OK” 或 “Not Found”） |
3.向服务器发送请求
3.1 open(method,url,async)
method:请求类型：get 还是 post
url：服务器（文件）位置
async:true(异步）或false(同步）
3.2send()/Send(string)
|
send() |
向服务器发送请求（用于 GET） |
|
send(string) |
向服务器发送请求（用于 POST） xhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”); xhttp.send(“fname=Bill&lname=Gates”);
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//无条件全部查询
function quancha(){
//1.创建HttpRequest对象
var xmlhttprequest;
if(window.XMLHttpRequest){
xmlhttprequest=new XMLHttpRequest();
}else{
xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.发送请求
xmlhttprequest.open("GET","http://127.0.0.1:8080/ajaxdmeo/studentall",true);
xmlhttprequest.send();
//3.请求发出以后的处理动作
xmlhttprequest.onreadystatechange=function(){
//请求发送并相应成功
if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200){
//以字符串返回响应数据
var info=xmlhttprequest.responseText;
//由于我们得到的json数据是一个字符串，
//我们现在需要将这个字符串转换成json对象
var jsonobj=eval("("+info+")");
//定义行变量
var rows="";
for(var i=0;i<jsonobj.length;i++){
rows=rows+"<tr><td>"+jsonobj[i].stuid+
"</td><td>"+jsonobj[i].stuname+
"</td><td>"+jsonobj[i].stuage+
"</td><td>"+jsonobj[i].stuaddress+
"</td></tr>";
}
document.getElementById("main").innerHTML=rows;
}
}
}
//根据id和name一起查询
function getStuidAndStuname(id,name){
//1.创建HttpRequest对象
var xmlhttprequest;
if(window.XMLHttpRequest){
xmlhttprequest=new XMLHttpRequest();
}else{
xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.发送请求
xmlhttprequest.open("GET","http://127.0.0.1:8080/ajaxdemo/studentstuidstuname?stuid="+id+"&stuname="+name,true);
xmlhttprequest.send();
//3.请求发出以后的处理动作
xmlhttprequest.onreadystatechange=function(){
//请求发送并相应成功
if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200){
//以字符串返回响应数据
var info=xmlhttprequest.responseText;
//由于我们得到的json数据是一个字符串，
//我们现在需要将这个字符串转换成json对象
var jsonobj=eval("("+info+")");
//定义行变量
var rows="";
if(jsonobj==null){
rows="<tr><td colspan='4'>没有记录</td></tr>";
}else{
rows="<tr><td>"+jsonobj.stuid+
"</td><td>"+jsonobj.stuname+
"</td><td>"+jsonobj.stuage+
"</td><td>"+jsonobj.stuaddress+
"</td></tr>";
}
document.getElementById("main").innerHTML=rows;
}
}
}
//根据id查询
function getStuid(id){
//1.创建HttpRequest对象
var xmlhttprequest;
if(window.XMLHttpRequest){
xmlhttprequest=new XMLHttpRequest();
}else{
xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.发送请求
xmlhttprequest.open("GET","http://127.0.0.1:8080/ajaxdemo/studentstuid?stuid="+id,true);
xmlhttprequest.send();
//3.请求发出以后的处理动作
xmlhttprequest.onreadystatechange=function(){
//请求发送并相应成功
if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200){
//以字符串返回响应数据
var info=xmlhttprequest.responseText;
//由于我们得到的json数据是一个字符串，
//我们现在需要将这个字符串转换成json对象
var jsonobj=eval("("+info+")");
//定义行变量
var rows="";
if(jsonobj==null){
rows="<tr><td colspan='4'>没有记录</td></tr>";
}else{
rows="<tr><td>"+jsonobj.stuid+
"</td><td>"+jsonobj.stuname+
"</td><td>"+jsonobj.stuage+
"</td><td>"+jsonobj.stuaddress+
"</td></tr>";
}
document.getElementById("main").innerHTML=rows;
}
}
}
//根据name查询
function getStuname(name){
//1.创建HttpRequest对象
var xmlhttprequest;
if(window.XMLHttpRequest){
xmlhttprequest=new XMLHttpRequest();
}else{
xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.发送请求
xmlhttprequest.open("GET","http://127.0.0.1:8080/ajaxdemo/studentstuname?stuname="+name,true);
xmlhttprequest.send();
//3.请求发出以后的处理动作
xmlhttprequest.onreadystatechange=function(){
//请求发送并相应成功
if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200){
//以字符串返回响应数据
var info=xmlhttprequest.responseText;
//由于我们得到的json数据是一个字符串，
//我们现在需要将这个字符串转换成json对象
var jsonobj=eval("("+info+")");
//定义行变量
var rows="";
if(jsonobj==null){
rows="<tr><td colspan='4'>没有记录</td></tr>";
}else{
rows="<tr><td>"+jsonobj.stuid+
"</td><td>"+jsonobj.stuname+
"</td><td>"+jsonobj.stuage+
"</td><td>"+jsonobj.stuaddress+
"</td></tr>";
}
document.getElementById("main").innerHTML=rows;
}
}
}
window.onload=function(){
//无条件全部查询
quancha();
//为按钮添加点击事件
document.getElementById("querybut").onclick=function(){
//得到文本框输入的数据值
var stuidval=document.getElementById("inputid").value;
var stunameval=document.getElementById("inputname").value;
if(stuidval!=""&&stunameval!=""){
getStuidAndStuname(stuidval,stunameval);
}
if(stuidval==""&&stunameval==""){
quancha();
}
if(stuidval!=""&&stunameval==""){
getStuid(stuidval);
}
if(stuidval==""&&stunameval!=""){
getStuname(stunameval);
}
}
}
</script>
</head>
<body>
<center>
stuid:<input id="inputid" type="text" />
stuname:<input id="inputname" type="text" />
<input id="querybut" type="button" value="搜索"/><br>
<hr>
<table id="main" border="1px" width="500px"></table>
</center>
</body>
</html>