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)