Ajax初接触

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36008914/article/details/57503243

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函数内不能执行。

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

展开阅读全文

没有更多推荐了,返回首页