原声的ajax

$('#send').click(function(){
    //请求的5个阶段，对应readyState的值
        //0: 未初始化，send方法未调用；
        //1: 正在发送请求，send方法已调用；
        //2: 请求发送完毕，send方法执行完毕；
        //3: 正在解析响应内容；
        //4: 响应内容解析完毕；


    var data = 'name=yang';
    var xhr = new XMLHttpRequest();        //创建一个ajax对象
    xhr.onreadystatechange = function(event){    //对ajax对象进行监听
        if(xhr.readyState == 4){    //4表示解析完毕
            if(xhr.status == 200){    //200为正常返回
                console.log(xhr)
            }
        }
    };
    xhr.open('POST','url',true);    //建立连接，参数一：发送方式，二：请求地址，三：是否异步，true为异步
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');    //可有可无
    xhr.send(data);        //发送

});

老师代码 1、2为get请求  3、4为post请求

1

<div id="mdiv"></div>


<script type="text/javascript">

var btn = document.getElementById("mbtn");
var mdiv = document.getElementById("mdiv");


btn.onclick = function() {
//1.得到 XMLHttpRequest 对象
var xmlHttp = getHttpRequest();

//2.设置请求的方式，及url,最后一个boolean值是设置是否异步请求
xmlHttp.open("GET","/ajax/AjaxServlet01",true);

//3.设置请求的回调函数，当服务器响应之后才会执行这个函数
xmlHttp.onreadystatechange = function() {
//回调函数中的readyState 的状态有 5个，但是我们只需要 readyState == 4 这个状态，服务器会完全响应。
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//xmlHttp.responseText 服务器端响应的结果
mdiv.innerHTML = xmlHttp.responseText;
mdiv.style.color="blue";
mdiv.style.backgroundColor="gray";
}
}

//4.发送请求
   xmlHttp.send(null);
}

function getHttpRequest(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP")? new ActiveXObject("Microsoft.XMLHTTP")
:new ActiveXObject("Msxml2.XMLHTTP");
}else{
alert("您的浏览器不支持ajax请更换标准浏览器！");
return false;
}
}

</script>

2.<div id="mdiv"></div>


<script type="text/javascript">

var btn = document.getElementById("mbtn");
var mdiv = document.getElementById("mdiv");


btn.onclick = function() {
//1.得到 XMLHttpRequest 对象
var xmlHttp = getHttpRequest();

//2.设置请求的方式，及url,最后一个boolean值是设置是否异步请求
xmlHttp.open("GET","/ajax/AjaxServlet02?userName=张三",true);

//3.设置请求的回调函数，当服务器响应之后才会执行这个函数
xmlHttp.onreadystatechange = function() {
//回调函数中的readyState 的状态有 5个，但是我们只需要 readyState == 4 这个状态，服务器会完全响应。
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//xmlHttp.responseText 服务器端响应的结果
mdiv.innerHTML = xmlHttp.responseText;
mdiv.style.color="blue";
mdiv.style.backgroundColor="gray";
}
}

//4.发送请求
   xmlHttp.send(null);
}

function getHttpRequest(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP")? new ActiveXObject("Microsoft.XMLHTTP")
:new ActiveXObject("Msxml2.XMLHTTP");
}else{
alert("您的浏览器不支持ajax请更换标准浏览器！");
return false;
}
}

</script>

3、<script type="text/javascript">

var btn = document.getElementById("mbtn");
var mdiv = document.getElementById("mdiv");


btn.onclick = function() {
//1.得到 XMLHttpRequest 对象
var xmlHttp = getHttpRequest();
//2.设置请求的方式，及url,最后一个boolean值是设置是否异步请求
xmlHttp.open("POST","/ajax/AjaxServlet03",true);
//3.设置请求的回调函数，当服务器响应之后才会执行这个函数
xmlHttp.onreadystatechange = function() {
//回调函数中的readyState 的状态有 5个，但是我们只需要 readyState == 4 这个状态，服务器会完全响应。
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//xmlHttp.responseText 服务器端响应的结果
mdiv.innerHTML = xmlHttp.responseText;
mdiv.style.color="blue";
mdiv.style.backgroundColor="gray";
}
}
//4.设置参数,并进行编码
    var args = "userName=张三&age=二十三";
//5.设置Content-Type类型为aapplication/x-www-form-urlencoded,以告知服务器实体中有参数 MIME
   xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//6.发送请求
   xmlHttp.send(args);
}
function getHttpRequest(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP")? new ActiveXObject("Microsoft.XMLHTTP")
:new ActiveXObject("Msxml2.XMLHTTP");
}else{
alert("您的浏览器不支持ajax请更换标准浏览器！");
return false;
}
}

</script>

4、

<div id="mytable">
<table >
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>电话</th>
<th>地址</th>
</tr>
</thead>
<tbody id="mdiv">

</tbody>
</table>
</div>


<script type="text/javascript">

var btn = document.getElementById("mbtn");
var mdiv = document.getElementById("mdiv");
var mytable = document.getElementById("mytable");


btn.onclick = function() {
var xmlHttp = getHttpRequest();
xmlHttp.open("POST","/ajax/AjaxServlet04",true);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var str = xmlHttp.responseText;
var obj = JSON.parse(str);
//console.log(typeof(obj));
var tbody = "";
for(var i=0;i<obj.length;i++){
tbody += "<tr><td>"+obj[i].id+"</td><td>"+obj[i].name+"</td><td>"+obj[i].phone+"</td><td>"+obj[i].address+"</td></tr>";
console.log("id:"+obj[i].id+","+"name:"+obj[i].name+","+"phone:"+obj[i].phone+","+"address:"+obj[i].address);
}
mdiv.innerHTML = tbody;
mytable.style.display="block";
}
}
//4.设置参数,并进行编码  encodeURIComponent（）函数可把字符串作为 URI 组件进行编码。
    var args = "userName=" + encodeURIComponent("张三") + "&age=二十三";
//5.设置Content-Type类型为aapplication/x-www-form-urlencoded,以告知服务器实体中有参数 MIME
   xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   xmlHttp.send(args);
}

function getHttpRequest(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP")? new ActiveXObject("Microsoft.XMLHTTP")
:new ActiveXObject("Msxml2.XMLHTTP");
}else{
alert("您的浏览器不支持ajax请更换标准浏览器！");
return false;
}
}

</script>