Ajax 学习记录
一、ajax内容简介:
(1)ajax的概念:局部刷新技术。不是一门新技术,是多种技术的组合。是浏览器端的技术。
(2)ajax的作用:实现在当前结果页中显示其他请求的响应内容。
二、ajax简单操作:
(1)js下操作原生ajax:
①创建ajax引擎对象
var ajax;
if(window.XMLHttpRequest){//火狐
ajax=new XMLHttpRequest();
}else if(window.ActiveXObject){//ie
ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
②复写onreadystatement函数
ajax.onreadystatechange=function(){
//判断Ajax状态吗
if(ajax.readyState==4){
//判断响应状态吗
if(ajax.status==200){
//获取响应内容
var result=ajax.responseText;
//处理响应内容
//获取元素对象
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML=result;
}else if(ajax.status==404){
//获取元素对象
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML="请求资源不存在";
}else if(ajax.status==500){
//获取元素对象
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML="服务器繁忙";
}
}else{
//获取元素对象
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML="";
}
}
//发送请求
ajax.open("get","ajax?name=qq&pwd=123",true);
ajax.send(null);
alert("哈哈");
}
(2)ajax的状态码
①ajax状态码:readyState:0,1,2,3,4。 4: 表示响应内容被成功接收
②响应状态码:status 200:表示一切OK 404:资源未找到 500:内部服务器错误
③ajax的异步和同步:ajax.open(method,urL,async)
async:设置同步代码执行还是异步代码执行
true代表异步,默认是异步
false代表同步
(3)get和post请求
①get请求将参数拼接在url中
②post请求参数需要在ajax.send(请求参数); 需要添加 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
三、ajax使用json接收数据及后台处理数据
(1)后端使用json 向js传输数据
resp.getWriter().write(new Gson().toJson(h)); 导入gson jar包
百度连接:链接:https://pan.baidu.com/s/1c9ZnWYUO_DzlzotQYojxSA 提取码:1111
(2)jsp页面获取json数据
var result=ajax.responseText; alert(result); eval("var u="+result);
即可使用:u.xx获取 内容值
四、封装
使用js封装ajax代码
百度连接:链接:https://pan.baidu.com/s/1vLPhM4d-LQM0_-WKA31uPA 提取码:1111
五、使用JQuery封装的AJAX方法
(1)引入jquery文件
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"demo_test.txt",success:function(result){
$("#div1").html(result);
}});
});
});
六、