Ajax初接触

Ajax 初接触

Ajax编程
    1.获取 XMLHttpRequest对象  判断浏览器
            function getXMLHttpRequest(){
                var xmlHttpRequest = null;
                //code for IE7+, Firefox, Chrome, Opera, Safari
                if((typeof XMLHttpRequest)!="undefined"){
                    xmlHttpRequest = new XMLHttpRequest();
                }else{
                    //IE6, IE5
                    xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
                }
                return xmlHttpRequest;
            }    

    2.发送请求
        xmlHttpRequest.open(method, url, boolean);
        readyState：
                0 (未初始化实例)对象已经建立，但尚未初始化 
                1 (初始化)对象已经建立，尚未调用send方法
                2 (发送数据)send方法已经调用，但当前状态以及http头未知
                3 (数据发送中)服务器已经接受到部分数据，但数据不全
                4 (响应结束)所有处理完成，数据已经返回给浏览器的js

get请求：

xmlHttpRequest.open("get", "${pageContext.request.contextPath }/validate?username="+username, true);
//注册事件 当状态发生改变，会自动调用该方法
xmlHttpRequest.onreadystatechange=function(){
//表示服务器响应结束处理   readyState是xmlHttpRequest的状态
if(xmlHttpRequest.readyState==4){
//当服务器的状态码为200时处理，status是xmlHttpRequest的请求状态码  先判断readyState，再判断status
if(xmlHttpRequest.status==200){
//获取响应的数据
var result =xmlHttpRequest.responseText;                        document.getElementById("validateMessage").innerHTML=result;
}
if(xmlHttpRequest.status==500){
document.getElementById("validateMessage").innerHTML="服务器内部错误！";
}
...
xmlHttpRequest.send(null);

post请求：

xmlHttpRequest.open("post", "${pageContext.request.contextPath }/validate", true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
//注册事件 当状态发生改变，会自动调用该方法
xmlHttpRequest.onreadystatechange=function(){
//表示服务器响应结束处理   readyState是xmlHttpRequest的状态
if(xmlHttpRequest.readyState==4){
    //当服务器的状态码为200时处理，status是xmlHttpRequest的请求状态码  先判断readyState，再判断status
if(xmlHttpRequest.status==200){
    //获取响应的数据
var result =xmlHttpRequest.responseText;                document.getElementById("validateMessage").innerHTML=result;
    }
if(xmlHttpRequest.status==500){                 document.getElementById("validateMessage").innerHTML="服务器内部错误！";
    }
}
...
xmlHttpRequest.send("username="+username);
}

两个原生的区别就是post请求要设置响应头，传递的数据放在send里；而get请求不设置响应头，数据放在url中。

      $.get(url,data,function(data){
            })
        });
      url，请求的地址；data请求是数据。get方式也可写在url中。function，请求成功时返回的数据。

     $.post(url,data,function(data){
            })
        });
      url，请求的地址；data请求是数据，以｛｝josn
      形式来写。function，请求成功时返回的数据。
     $.getJSON(url,data,function(data){
            })
        });
      url，请求的地址；data请求是数据，以｛｝josn
      形式来写。function，请求成功时返回的数据。
      这个方法的data必须是服务器得到的json格式的数据，否则success函数内不能执行。
      $.ajax({
        url:"",
        type:"get/post",
        data: ,//需要传递的数据"name="+name+"&password"+password
        dataType:  ,//json/jsonp/text/html/script,目前最多就是json吧。jsonp用来解决跨域的问题，不过服务器端也要相应的改写out流。
        success:function()｛｝
      });
      url，请求的地址；data请求是数据，以｛｝josn
      形式来写。function，请求成功时返回的数据。
      这个方法的data必须是服务器得到的json格式的数据，否则success函数内不能执行。

还有一个月，听别人说就业行情，感觉要丸。。。