Ajax及jQuery学习

1.AJAX(Asynchronous JavaScript and XML),异步的javaScript与XML 2.AJax中一个重要的对象是XMLHttpRequest. function ajaxSubmit(){ var xmlHttpRequest=null;//声明一个空象以接收XMlHttpRequest对象 if(window.ActiveXObject)//IE浏览器 { xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest)//除IE的其他浏览器实现 { xmlHttpRequest=new XMLHttpRequest(); } if(null!=xmlHttpRequest){ var v1=document.getElementById("value1ID").value; var v2=document.getElementById("value2ID").value; xmlHttpRequest.open("GET","Ajaxservlet?v1="+v1+"&v2="+v2",true"); //POST请求 xmlHttpRequest.open("POST","Ajaxservlet"); //关联好ajax回调函数 xmlHttpRequest.onreadystatechange=ajaxCallback; //真正向服务器发送数据() xmlHttpRequest.send();//如果是post，就要写你要发的信息 //POST方法提交， //默认的表单方式，请求头 xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlHttpRequest.send("v1="+v1+"&v2="+v2"); } } 3.使用Ajax准备向服务器端发送请求， xmlHttpRequest.open("GET","Ajaxservlet","true"); function ajaxCallback(){ alert("test"); //完全收到服务器的响应 if(xmlHttpRequest.readyState==4){ //服务器没有抛异常，给我们正确的结果了 if(xmlHttpRequest.status==200){ var responseText=xmlHttpRequest.responseText; document.getElementById("div1").innerHTML=responseText; } } } 4.调用Ajax,onclick="ajaxSubmit();" js中，name的话取第0个元素，如果是id,则直接getElementById doGet{ String v1=request.getParameter("v1"); String v2=request.getParameter("v2"); String v3=String.valueOf(Integer.valueOf(v1)+Integer.valueOf(v2)); PrintWrite out=response.getWriter(); System.out.println("doGet invoked"); response.setHeader("pragma","no-cache"); response.setHeader("cache-control","no-cache); out.flush(); } jquery 引入jquery <script type="text/javascript" src="jquery-1.4.4.js"></script> 开始写jquery 口号：write less,do more ready方法的作用是当页面中的dom加载完毕后，开始执行函数中的参数跟onload很像 <script type="text/javascript"> ${document}.ready(function(){ alert("hello world"); }); //底层通过循环来实现 //click是一个方法 $(document).ready(function(){ $("a"),click(function(){ alert("hello world"); }); }); </script> <h1><h1> <body> <a href="#">test1</a><br> <a href="#">test2</a><br> <a href="#">test3</a><br> <div id="clickme"></div> </body> $(document).ready(function(){ var pElement =document.getElementByTagName("p")[0]; //将DOM对象转变成jQuery对象 var pElementjQuery=$(pElement); alert("DOM对象结果："+pElement.innerHTML); alert("jQuery对象的结果："+pElementjQuery.html()); var cm=$("#clickme");//获得的是jQuery对象 //jQuery对象转换为Dom对象(第一种方式） var t=cm[0];//t是dom对象 alert(t.innerHTML); });

Ajax及jQuery学习

猜你在找的Ajax相关文章