前端之家收集整理的这篇文章主要介绍了
学习AJAX，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
1.含义 AJAX（Asynchronous JavaScript and XML）异步的JavaScript和xml AJAX 是与服务器交换数据并更新部分网页的技术。无需加载整个网页。 2.XMLHttpRequest 是AJAX的基础，用于在
后台同服务器交换数据。 3.AJAX主要设计到的
内容 整体过程比较固定： 1）创建一个XMLHttpRequest对象(异步数据读取) var xmlhttp; if(window.XMLHttpRequest){xmlhttp=new XMLHttpRequst;} else{xmlhttp=ActiveXObject("Microsoft.XMLHTTP");} 2) 请求 xmlhttp.open("GET",url,true); or POST,url是要访问的服务器端的一个地址。 xmlhttp.send(); 3) onreadystatechange 当请求就绪，就开始执行这个里面的
函数 xmlhttp.onreadystatechange=state_change; 4)具体
修改的过程，即响应 function state_change(){ if(xmlhttp.redayState==4 && xmlhttp.status==200){ document.getElementById("").innerHTML=xmlhttp.responseText; } } 注：AJAX的readyState有四个取值： 请求未初始化 服务器连接已建立 请求已接收 请求处理中 请求已完成，且响应已就绪 AJAX的status有二个取值： 200--"OK"
404--"未找到
页面" 注:响应
属性有两个： requestText 获得字符串形式的响应数据。 requestXML 获得 XML 形式的响应数据。 跟open中url会一致 4.AJAX数据传输主要有三种格式： -XML -JSON -HTML 1）采用HTML，一般是存储在responseText中。 2）采用XML，一般是存储在responseXML中。 3）采用JSON， 1)HTML流程 var aNodes=document.getElementsByTagName("a"); aNodes[i].onclick=function(){ var xmlhttp=new XMLHttpRequest(); var method="GET"; var url=this.href; xmlhttp.open(method,url); xmlhttp.send(); xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4){ if(xmlhttp.status==200){ document.getElementById("details").innerHTML=xmlhttp.responseText; } } } return false; 2）XML通用的数据传输格式 通过xmlhttp.responseXML，
获取之后--》先解析： var name=result.getElementsByTagName("name")[0].firstChild.nodeValue; var website=result.getElementsByTagName("website")[0].firstChild.nodeValue; var email=result.getElementsByTagName("email")[0].firstChild.nodeValue; 按照XML
文件中的格式
标签 --》解析之后创建节点 var aNode=document.creatElement("a"); aNode.appendChild(document.createTextNode(name)); aNode.href="mailto:"+email; var h2Node=document.creatElement("h2"); h2.appendChild(aNode); var aNode2=document.creatElement("a"); aNode2.appendChild(document.createTextNode(website)); aNode2.href=website; 上述是按照如下格式创建的 /* <h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2> <a href="http://andybudd.com/">http://andybudd.com</a> */ --》最后到你要
显示的区域去
显示 var detailsNode=document.getElementById("details"); detailsNode.innerHTML="";//
显示下一个之前清空一下 detailsNode.appendChild(h2Node); detailsNode.appendChild(aNode2); 3）JSON 本身的形式是键值对： var jsonObject={ "name":"atguigu","age":12,"address":{"city":"BeiJing","school":"尚硅谷"},"teaching":function(){ alert("JavaEE,Android..."); } }; jsonObject.teaching(); json实际是一个文本字符串，可以用responseText读出字符串结果，然后用eval把读出的字符串 转换成javascript（JSON对象） eval作用举例： var jsonStr="{'name':'atguigu'}"; eval("alert('hello eval')"); eval转换json对象： var jsonStr="{'name':'atguigu'}"; var jsonStr1=eval("("+jsonStr+")");//注意格式 alert(jsonStr1.name); 5.用jQuary写AJAX,方便之处在于，它封装了很多
函数。 load():能载入远程的
HTML代码,感觉上是类似innerHTML,向某个节点写
内容。 load(url) load(url,args),args写的是json格式，url后面加参数默认用GET
方法，args
上传函数用的是POST
方法 load(url,args,回调
函数) jQuery写的一个例子： <script type="text/javascript" src="scripts/jquery-1.7.2.js"> </script> <script type="text/javascript"> $(function(){ $("a").click(function(){ var url=this.href; $("#content").load(url); return false; }); }); </script> </head> <body> <a href="helloAjax.txt">HelloAjax</a> <div id="content"></div> get(),post()，getJSON()
方法。 -->此后，就可以在
后台构建JSON对象，前端
获取即可。 -->然后可以通过加入jar包，jackson的jar包就可以更方便的构建json对象。 -->可以采用
方法：ObjectMapper mapper=new ObjectMapper(); String jsonStr=mapper.writeValueAsString(customer); System.out.println(jsonStr);//这就是JSON格式 -->当加入注解时：org.codehaus.jackson.annotate.JsonIgnore @JsonIgnore//这个往往会忽略customer中不是getter的
属性 原文链接：https://www.f2er.com/ajax/162320.html
