AJAX--简单笔记

目录

 

方法：

xmlhttp.open(method,URL,Async)             

xmlhttp.send(string)

xmlhttp.getAllResponseHeaders()        获取响应头

xmlhttp.getResponseHeader('Last-Modified')        获取指定响应头

xmlhttp.responseText()       响应内容

xmlhttp.responseXML()       获得xml形式的响应数据

onreadystatechange 事件:

XMLHttpRequest       对象有三个重要的属性

ajax 的例子：

get请求：

post 请求

ajsx 提交 form 表单：

get方式：

post方式：

---

第一步：

创建AJAX的XMLHttpRequest对象

//创建ajax对象
var xmlhttp;
//如果是 ie7以上的 以及其他 谷歌，火狐之类的浏览器
if (window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
}else{
    //ie6 ie5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

第二步：

执行方法：

xmlhttp.open("GET","/demo",true);
xmlhttp.send();

第三步：

如果 async 是 true

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
 }

 

方法：

xmlhttp.open(method,URL,Async)             

           method: 请求方式 get/post

          URL: 请求路径

          Async：是否异步 "true/false"

                       当Async=true的时候，请规定在响应处于 onreadystatechange 事件中的就绪状态执行的函数

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
 }

                    当Async=false的时候，请不要编写 onreadystatechange 函数，把需要执行的代码放在send() 语句后面即可；

xmlhttp.send(string)

           string 仅使用与 POST请求

xmlhttp.getAllResponseHeaders()        获取响应头

xmlhttp.getResponseHeader('Last-Modified')        获取指定响应头

xmlhttp.responseText()       响应内容

           只有responseText,只有当 readyState的属性值变为 4 的时候，该属性才可以使用。

xmlhttp.responseXML()       获得xml形式的响应数据

          如果是xml,而且需要作为xml对象进行解析，需要使用该属性

例如：
xmlDoc=xmlhttp.responseXML; 
txt=""; 
x=xmlDoc.getElementsByTagName("ARTIST"); 
for (i=0;i<x.length;i++){ 
	txt=txt + x[i].childNodes[0].nodeValue + "<br>"; 
} 
document.getElementById("myDiv").innerHTML=txt;

onreadystatechange 事件:

         每当 readyState 改变时，就会触发该事件

XMLHttpRequest       对象有三个重要的属性

                onreadystatechange 存储函数名，每当readyState 属性改变时，就会调用该函数

                readyState      状态码

                           0：请求未初始化

                          1：服务器连接已建立

                          2：请求已接受

                         3：请求处理中

                        4:请求已完成，可以获取并使用服务器的响应

ajax 的例子：

     get请求：

<h1 id="asd"></h1>
<button onclick="demo()">点击</button>


<script>
    function demo() {
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //code for IE7+ 其他浏览器
            xmlhttp = new XMLHttpRequest();
        } else {
            //code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("asd").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","/demo",true);
        xmlhttp.send();
    }
</script>

post 请求

<h1 id="asd"></h1>
<button onclick="demo()">点击</button>


<script>
    function demo() {
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //code for IE7+ 其他浏览器
            xmlhttp = new XMLHttpRequest();
        } else {
            //code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("asd").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("POST","/demo",true);
        xmlhttp.send("username=root&password=123");
    }
</script>

ajsx 提交 form 表单：

get方式：

<form action="">
    手机号:<input type="text" name="ins" id="tel">
    <input type="submit" value="a">
</form>


$("#tel").blur(function () {
        //alert("失去焦点");
        //手机号码验证
        $.ajax({
            type: "get",    //请求方式
            url: "/demo1",  //请求路径
            data: "tel=" + $(this).val(),    //请求的数据
            success: function (obj) {        //请求成功调用的方法
                    $("#asd").html('<b style="color:red">' + obj + '</b>')
            }
        });
    });

post方式：

只是把 type 改成了 post