JS第三阶段 Ajax

菜鸟：XMLHttpRequest格式集锦：

function loadXMLDoc(){
    //创建XMLHttpRequest对象
    var xmlhttp;
    //创建XMLHttpRequest对象
    xmlhttp=new XMLHttpRequest();
    //onreadystatechange:存储函数(或函数名)，每当readyState属性改变时，就会调用该函数。
    xmlhttp.onreadystatechange=function(){
        //readyState:存有XMLHttpRequest的状态,从0到4发生变化。0: 请求未初始化;1: 服务器连接已建立;2: 请求已接收;3: 请求处理中;4: 请求已完成，且响应已就绪。∴onreadystatechange事件被触发5 次(0-4)
        //status: 200: "OK";404: 未找到页面。
        if (xmlhttp.readyState==4 && xmlhttp.status==200){//∴表示响应已就绪
            //responseText：来自服务器的响应，获得字符串形式的响应数据。
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    //open(method,url,async)方法=open("GET"/"POST","url",true)
    xmlhttp.open("POST","/ajax/demo_post2.asp",true);
    //setRequestHeader(header,value)方法=setRequestHeader("头名称","头的值")。发送HTTP协议的头文件，告诉服务器客户端要下载什么信息
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    //send()仅用于POST请求
    xmlhttp.send("fname=Bill&lname=Gates");
}

//输出：
//AJAX
//btn:请求数据
//click->你好，Bill Gates，今天过得怎么样？

//h5
//<h2>AJAX</h2>
//<button type="button" onclick="loadXMLDoc()">请求数据</button>
//<div id="myDiv"></div>

callback 函数

var xmlhttp;
function loadXMLDoc(url,cfunc){//loadXMLDoc->cfunc
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=cfunc;//cfunc->onreadystatechange
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}
function myFunction(){
    loadXMLDoc("/ajax/test1.txt",function(){//loadXMLDoc->cfunc重复接收
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    });
}

showHint()函数

function showHint(str){//showHint()函数,str
  var xmlhttp;
  xmlhttp=new XMLHttpRequest();
  if (str.length==0){//str
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/ajax/gethint.asp?q="+str,true);//str
  xmlhttp.send();
}

//输出:
//input不输入字符就回车，得到："ERR1: 未找到您查询的数据！"
//input输入字符，得到：建议："建议：no suggestion"

//h5
//<h3>请在下面的输入框中键入字母（A - Z）：</h3>
//<form action=""> 
//姓氏：<input type="text" id="txt1" onkeyup="showHint(this.value)" />//onkeyup事件触发
//</form>
//<p>建议：<span id="txtHint"></span></p> 

项目：可恶的Ajax！以下是模板——

var min = window.location.href //刷新当前页面,向指定的url提交数据/~.~.Reload()会提示是否提交
var need = (min || '').split("?"); //字符串对象.split(字符串或正则表达式,指定返回的数组的最大长度):把一个字符串分割成字符串数组.?get,参数是什么.
var type = (need[1] || '').split("="); //post,...=true
var keycode = type[1]
var obj = {}
obj.page = 1;
obj.limit = 50; //变量
obj.lockKeyGroupRandCode = keycode
var time = new Date().getTime(); //获取时间
/* 1.login */
$.ajax({ //返回其创建的 XMLHttpRequest 对象
    type: 'GET', //String
    url: 'http://....com/api' + '/loginPage?time=' + time, //String，当页发送请求的地址
            data: {
                lockKeyGroupRandCode: keycode,
                page: 1,
                limit: 50
            },
    xhrFields: { //跨域请求是不会发送cookie等用户认证凭据的,∴再次访问远程api的时候，cookie是不会被带上的。∴用XMLHttpRequest请求的时候，要写这条
        withCredentials: true
    },
    crossDomain: true, //false表示同一域请求，true表示跨域请求。它可以使服务器端重定向到另外一个域。
    dataType: 'json', //预期服务器返回的数据类型
    contentType: 'application/json;charset=utf-8',
    success: function(response) { //ajax将会把ajax请求获取倒的内容指定给response这个变量
        console.log(response);
        if (data.code == 0) { //返回一个包含HTTP状态码的信息头，判断是不是true
        } else {
            mui.alert(data.msg)
        }
    },
    error: function() {
        mui.alert('加载失败')
    }
});

网上模板 

$(function(){
    $('#send').click(function(){
        $.ajax({
            type: "GET",
            url: "test.json",
            data: {username:$("#username").val(), content:$("#content").val()},
            dataType: "json",
            success: function(data){
                $('#resText').empty();   //清空resText里面的所有内容
                var html = ''; 
                $.each(data, function(commentIndex, comment){
                    html += '<div class="comment"><h6>' + comment['username']
                    + ':</h6><p class="para"' + comment['content']
                    + '</p></div>';
                });
                $('#resText').html(html);
            }
        });
    });
})

果然还是要遍历出data，最后得到3个而不是6个。=>$.each  /  eachli.each(function (i)   还是需要的。