Ajax原生的五个基本步骤及jq中的ajax

Ajax原生的五个基本步骤及jq中的ajax

Ajax(异步javascript 和xml），一种创建交互式网页应用的网页开发技术，其核心是JS的XmlHttpRequest对象。该对象可以使用JS向服务器提出请求并作出相应而不阻塞用户，进行局部刷新
它通过异步模式，提升了用户体验，最大的特点是可以实现动态不刷新来存取数据

在原生Ajax中，它可分为五个步骤：
1.创建AJAX引擎对象–所有操作都是通过引擎对象(XMLHttpRequest)
2. 绑定监听–监听服务器是否已经返回对应数据（回调函数)
3. 绑定地址,及配置其他参数——open()
open(method: string, url: string): void;
open(method: string, url: string, async: boolean, username?: string | null, password?: string | null): void;
例子： xmlHttp.open(“POST”,“ajaxServlet”,true )
4。发送请求（send）
5.接受相应返回数据，这个是写在第三个步骤回调函数里面的

function ajax() {
            //1创建AJAX引擎对象--所有操作都是通过引擎对象
            var xmlHttp=new XMLHttpRequest();
            //2绑定监听--监听服务器是否已经返回对应数据（回调函数)
            xmlHttp.onreadystatechange=function () {
                if(xmlHttp.readyState==4&&xmlHttp.status==200){
                    //5接受相应数据
                    var res=xmlHttp.responseText;
                    document.getElementById("span1").innerHTML=res;
                }
            }
            //3绑定地址,及配置其他参数
            xmlHttp.open("POST","ajaxServlet",true )
            //4发送请求
            xmlHttp.send();
        }

在jq中的写法有三种，get,post和ajax，我只记了第三种，通用

 function ajax() {
            var id=document.getElementById("id").value;
            $.ajax({
                url:"anli1",
                async:true,  //是否异步，默认true
                type:"post",
                data:{"id":id,"password":123},
                success:function (data) {   //数据	成功接受时的操作
                    if(data=="n"){
                        document.getElementById("tip").style.display="block";
                    }
                    else { 
                        document.getElementById("tip").style.display="none";
                    }
                },
                error:function () {            //数据未能成功接受时的操作
                    alert("出错了。。。");
                },

            })
        }

后台需要返回一个对应类型的字符串或者json类型的字符串数据，可以使用Goole的json JAR包来转换