Ajax和JSON

 

Ajax:异步的JavaScript和XML

 

1.  比较

  没有Ajax的:

    Ajax和JSON

 

 

  有Ajax:

    Ajax和JSON

 

 

 

2.XMLHttpRequest

(1)属性

  Ajax和JSON

 

 

   服务器响应:

    ①responseText:字符串形式的响应数据

    ②responseXML:XML形式响应数据

 

 

 

 

Ajax和JSON

 

 

 

3. 实现方式

  3.1  原生JS实现

function fun() {
            //发送异步请求
            //1.创建核心对象
            var xmlHttp;
            if(window.XMLHttpRequest) { //非IE浏览器
                xmlHttp = new XMLHttpRequest();
            }
            else if(window.ActiveXObject) { //IE浏览器
                try {
                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                }catch(e) {
                    try{
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }catch(e) {

                    }
                }

            }
            //2. 建立连接
                //参数1:请求方式
                //参数2:请求的URL
                //参数3:true,异步  false,同步
            xmlHttp.open("GET","ServletTest?name=xt",true);
            //xmlHttp.open("POST","test.txt",true);
            //3.发送请求
            xmlHttp.send();
            //xmlHttp.send("name=value"); //post请求的参数
            //4.接收并处理服务器的响应结果
            xmlHttp.onreadystatechange = function () {
                if(xmlHttp.readyState==4 && xmlHttp.status==200) {
                    document.getElementById("div2").innerHTML=xmlHttp.responseText;

                }
            }
        }

 

  3.2 JQuery方式

(1)$.ajax

<script>
    function fun(){
        $.ajax({
            url:"ServletTest", //url
            type:"POST",                //请求方式
            data:{"name":"xt","age":20},
            success:function (data) {  //响应成功的回调函数
                var x = $("#input2");
                x.val(data);
            }
        });
    }
</script>

 

(2)$.get("url",data,callBack,dataType)

  发送GET请求

 

(3)$.post("url",data,callBack,dataType)

  发送POST请求

 

 

------------------------------------------------------------------------------------------------------------------------------------------

JSON

  javascript对象表示法

  比XML更小,能更快解析

 

语法:

  键值对保存一个数据

  多个数据逗号分隔

  [ ] 保存数组

  { } 保存对象

 

值:

  数字、字符串、逻辑值、数组、对象、null

 

例子:

  定义一个对象数组:

var objs = [
    {"name":"name1","age":10},
    {"name":"name2","age":20},
    {"name":"name3","age":30},
];

 

  获取第一个对象的值:

var a = objs[0].name //objs[0]["name"]
var b = objs[0].age  //objs[0]["age"]

 

  遍历:

for(var i in objs) {
    var x = objs[i];
    for(var key in x) {
        console.log(key+":"+x[key]);
    }
}

 

Ajax和JSON

上一篇:js 对象深拷贝 ---- 基本数据类型和引用数据类型


下一篇:66 说一下 JSP 的 4 种作用域?