Ajax学习笔记
发布时间：2020-12-15 21:41:05 所属栏目：百科 来源：网络整理
导读：1.使用Ajax实现异步交互的步骤 1.创建XMLHttpRequest对象 var xmlHttpRequest=createXmlHttpRequest(); function createXmlHttpRequest(){ try{ return new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ try{ return new ActiveXObject("MSxml2.XMLHTTP")
|
1.使用Ajax实现异步交互的步骤 1.创建XMLHttpRequest对象 var xmlHttpRequest=createXmlHttpRequest(); function createXmlHttpRequest(){ try{ return new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ try{ return new ActiveXObject("MSxml2.XMLHTTP"); }catch(e){ try{ return new XMLHttpRequest(); }catch(e){ } } } } 2.通过XMLHttpRequest对象设置请求信息 xmlHttpRequest.open("GET/POST",url,true); 3.创建回调函数,根据响应状态动态更新页面S xmlHttpRequest.onreadystatechange=processRequest; function processRequest(){ if(xmlHttpRequest.readyState==4){ if(xmlHttpRequest.status==200){ if(xmlHttpRequest.responseText!=null){ //进行相应的结果显示 } } } } 4.向服务器发送请求 xmlHttpRequest.send(null); 2.Jquery中Ajax的使用 1.$.ajax()方法 //Jquery最底层的Ajax方法的实现 1.基本语法 $.ajax({ url:"url",//发送请求的地址 type:"GET"|"POST",//发送请求的方式 data:"name="+obj.value,|{"name":obj.value} //发送到服务器的数据 dataType:"Text",//服务器返回的数据的类型 XML,HTML,Script,JSON.JSONP,Text async:false,cache:false,success:function(result){ //请求成功后调用的函数 //可以执行的内容 },error:function(){ //请求失败后执行的函数 //可以执行的内容 } }); 2.$.get()方法 //以get方式请求服务器加载数据的Ajax的方法 1.基本语法 $.get(url,data,function(result){ //可以执行的内容 }); 3.$.post()方法 //以post方式请求服务器加载数据的Ajax的方法 $.post(url,function(result){ //可以执行的内容 }); 4.$("selector").load()方法 //该方法直接将返回的结果内容复制到某个元素对象 $("#name").load(url,function(result){ //可执行的内容 }); 5.$.getJSON()方法; //该方法返回的result为JSON对象 $.getJSON(url,function(result){ //该方法返回JSON对象result...在此处可以对其进行相关的操作 }); 6.$("selector").ajaxStart(); //在请求开始的时候调用的方法 $(".name").ajaxStart(function(){ alert("请求即将开始"); }); 7.$("selector").ajaxComplete(); //请求完成后调用的方法 $("selector").ajaxComplete(function(){ alert("请求完成了"); }); 3.JSON的应用 JavaScript Object Notation //一种轻量级的数据交换格式 1.//定义JSON对象 var json={"name":"张三","age":20,"address":"深圳市南山区"}; $("#object").append("<ul><li>"+json.name+"</li><li>"+json.age+"</li><li>"+json.address+"</li></ul>"); 2.//定义JSON数组 var arr=["China","Japan","American","Italy","France","Germany"]; $("#array").append("<ol class='arr'></ol>"); //使用循环的方式来取得数组中的元素值 for(var i=0;i<arr.length;i++){ $(".arr").append("<li>"+arr[i]+"</li>"); } //使用jquery的迭代属性来遍历数组的元素值 $(arr).each(function(i,a){ $(".arr").append("<li>"+a+"</li>"); }); 3.//定义JSON对象数组 var objarr=[{"name":"张三","address":"深圳市南山区"},{"name":"李四","age":21,"address":"深圳市宝安区"}]; $("#objectarray").append("<dl class='objarr'></dl>"); $(objarr).each(function(i,a){ $(".objarr").append("<dt>"+a.name+"</dt>"); $(".objarr").append("<dd>"+a.age+"</dd>"); $(".objarr").append("<dd>"+a.address+"</dd>"); }); 4.//测试把字符串转换为JSON对象 var str='{"name":"哈喽","age":25,"address":"深圳市福田区"}'; var user=$.parseJSON(str); $(user).each(function(){ $("#parseJSON").append("<p>"+user.name+"</p>"); $("#parseJSON").append("<p>"+user.age+"</p>"); $("#parseJSON").append("<p>"+user.address+"</p>"); }); 4.Ajax请求Action进行无刷新的校验 1.创建Action类 public class UserAction extends ActionSupport{ private User user; private InputStream inputStream; //省略相应的get/set方法 private UserBiz ub=new UserBizImp(); public String checkName(){ String str=""; boolean flag=ub.exist(user.getName()); if(flag){ str="当前用户名已经存在"; }else{ str="当前用户名可以使用"; } return success; } } 2.struts.xml文件配置 <action name="*User" class="cn.struts.action.UserAction" method="{1}"> <result name="success" type="stream"> <param name="dataType">text/html</param> <param name="inputStream">inputStream</param> </result> </action> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |