浅谈Ajax

首先Ajax有两种,一种使用Js写的原生ajax,另一种是基于Jquery的ajax,一般使用ajax就是为了页面的异步刷新,因此只谈一下异步ajax.

第一种:用Js写的原生ajax

1)首先要确认在什么地方实现页面的异步

2)讲解一下ajax的流程

以代码为列:

/*
    创建 XMLHttpRequest 对象
    创建在服务器响应就绪时执行的函数
    向服务器上的文件发送请求
    请注意添加到 URL 末端的参数（q）（包含输入框的内容）
 */
if (str.length==0)//如果输入框是空的（str.length==0），该函数会清空 txtHint 占位符的内容，并退出该函数。
{
    document.getElementById("txtHint").innerHTML="";
    return;
}
if (window.XMLHttpRequest)
{
    // IE7+,Firefox,Chrome,Opera,Safari 浏览器执行的代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    //IE6,IE5 浏览器执行的代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","../ajax/ajax1.PHP?q="+str,true);// //规定请求的类型、URL 以及是否异步处理请求,true表示异步，false表示同步
xmlhttp.send();//将请求发送到服务器。
其中‘txtHint’是<p>里的<span>的id,也就是要实现异步的地方，前面基本都是一个套路，需要改变的只有open()里的参数，第一个参数是请求的类型（POST或GET），第二个参数是处理数据页面的url,
第三个参数判断是否为同步(false)或异步(true).

第二种:用Jquery写的ajax
1)首先确定做什么操作后，页面需要异步刷新，可以是onkeyup，onclick等
2）直接上代码，以onclick为列

$("#submit").on(‘click‘,function (event) {    $.ajax({        type:‘GET‘,data:$("form").serialize(),dataType:‘json‘,url:‘../other/cookie1.PHP‘,success:function (data) {            if(data.status===2){                alert(data.message);            }            else{　　　　　　　　　　........　　　　　　　　　　}        }    });});一般用$.ajax()实现异步，type是请求类型(POST 或GET)，data是需要转交其他后台程序处理的数据，一般都是为表单数据，并且需要序列化，dataType是数据类型一般是json，这一点没有强制性规定，url是数据将要被进行处理的程序，success是一个回调函数，在数据处理后会回传data,弹框输出message.前四个顺序可以颠倒。以上仅是我个人的一点心得，不足之处还望包涵。

相关推荐