AJAx入门教程
三.Ajax
1.原生AJax
var xhr; //1.创建一个XMLHttpRequest对象
if(window.ActiveXObject){ //判断浏览器里面有没有ActiveXObject对象
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}
function test(){
xhr.open("post", "<%=request.getContextPath()%>/ajaxServlet", true); //设置请求
xhr.onreadystatechange=function(){ //设置回调函数
if(xhr.readyState==4&&xhr.status==200){
alert(xhr.responseText);
}
};
//设置文件头，不设置就没有传递参数的功能，设置成功以后就可以像提交表单传递数据一样name属性值和value属性值
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("name="+document.getElementById("name").value);
}
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
//response.getWriter().print(name+"helloword");
if(name.equals("admin")){
response.getWriter().print("用户名已存在");
}else{
response.getWriter().print("用户名可用");
}
}
2.第一层封装
function test(){//验证用户名唯一
var name=$("[name='name']").val();
$.ajax({
url:"demoServlet",//路径
data:{name:name},//传值
type:"post",//提交方式
dataType:"text",//预期服务器响应的类型
success:function(msg){//请求成功后的回调函数
if(msg=="no"){
$("span").text("用户名已存在,请重写输入");
$("#b").attr("disabled",true);
}else{
$("span").text("");
$("#b").attr("disabled",false);
}
}
});
}
3.第二层封装
$(function(){
$.post(
"Servlet", //路径
{pid:1}, //传值
function(json){ //请求成功后的回调函数
for(var i in json){
$("select:eq(0)").append("");
}
},
"json"
);
});
$.get(); load()
3.第三层封装
$.json(); $.javasrcipt();
4.常用json包使用
1. gson
Gson gson = new Gson();
String json = gson.toJson(Object);
2.fastJson
String jsonString = JSON.toJSONString(Object);
3.jackson
5.Jsonp
跨域取值
$.ajax({
url:"http://localhost:8080/jsonp/jsonpServlet?method=getJson",
data:"",
type:"get",
dataType:"jsonp"
async:"false",
jsonpCallback:"callbackparam",
success:function(data){
alert(‘success’);
},
error: function(){
alert('fail');
}
});
四.简单特效
1.三种弹框
window.alert("确定要退出吗？");
window.prompt("请输入年份", 2017);
window.confirm("是否提交？")
2.图片上传预览
Html中：
<input type="file" style="float:left" id="img" class="easyui-file" maxlength="20" onchange="seeBefore(this)"/>
<div height="180px"><span style="float:left"> 图片预览：span>
<img src="" id="imgSee" style="width:200px;height:200px;float:left" />
div>
"submit" value="提交">
js中：
/* 图片预览seeBefore(this) */
function seeBefore(file){
var img = document.getElementById('imgSee');
if (file.files && file.files[0]) {
var reader = new FileReader();
reader.onload = function(evt){
img.src = evt.target.result ;
}
reader.readAsDataURL(file.files[0]);
}else{
img.src = file.value;
}
}
3.全选，全不选
function ck(){
$("[name='cks']").map(function(){
this.checked=!this.checked;
});
}
function ck(){
$("[name='cks']").each(function(){
$(this).attr("checked",!$(this).attr("checked"));
});
}
4.多选拼接id
var id=$("[name='cks']:checked").map(function(){
return this.value;
}).get().join();
alert(id);