AJAX 的简单实例 JS实现 和JQuery 实现

什么是AJAX

Asynchronous Javascript And XML”（异步JavaScript和XML）

AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

原生JS实现AJAX

function ajax() {

            //先声明一个异步请求对象
            var xmlHttpReg = null;
            if (window.ActiveXObject) {//如果是IE

                xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");

            } else if (window.XMLHttpRequest) {

                xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg
            }

            //如果实例化成功,就调用open()方法,就开始准备向服务器发送请求
            if (xmlHttpReg != null) {
                xmlHttpReg.open("get","text.json",true);
                xmlHttpReg.send(null);
                xmlHttpReg.onreadystatechange = function () {
                    if (xmlHttpReg.readyState == 4) {//4代表执行完成

                        if (xmlHttpReg.status == 200) {//200代表执行成功
                            //将xmlHttpReg.responseText的值赋给ID为resTextdocument.getElementById("resText").innerHTML = xmlHttpReg.responseText;
                            alert();
                        }
                    }
                }; //设置回调函数

            }

            //回调函数
            //一旦readyState的值改变,将会调用这个函数,readyState=4表示完成相应

            //设定函数doResult()
            function doResult() {

                if (xmlHttpReg.readyState == 4) {//4代表执行完成

                    if (xmlHttpReg.status == 200) {//200代表执行成功
                        //将xmlHttpReg.responseText的值赋给ID为resTextdocument.getElementById("resText").innerHTML = xmlHttpReg.responseText;
                        alert();
                    }
                }
            }
        }
    }

JQuery实现

1导入JQuery库
<script src="js/jquery.js"></script>
2

function getDataFormServer() {
        $.ajax({
            type: "GET",url: "http://127.0.0.1/0809/text.json",dataType: "text",success: function (data,textStatus) {
                alert("success");
                $("#myDiv").html(data);
            },error: function (XMLHttpRequest,textStatus,errorThrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            },complete: function (jqXHR,status,responseText) {
                alert("请求完成")
            }
// });

        }

跨域问题

一般情况下 ajax是不能跨域请求的，
所谓的不能跨域请求就是自己的主机不能去请求别的主机内容的。
所以这里的例子都是 在自己的服务器上运行的。

$.parseJSON

将得到的JSon转换成对象。

success: function (data) {
                var data = $.parseJSON(data);}

解析动态的添加到 html文档中

str = "<p>" + data.pName + "</p></div>";
                    $("#infos").append(str);