Ajax与Json

最新推荐文章于 2022-04-24 07:34:40 发布

weixin_47204963

最新推荐文章于 2022-04-24 07:34:40 发布

阅读量77

点赞数

分类专栏：笔记文章标签： jquery

本文链接：https://blog.csdn.net/weixin_47204963/article/details/109278739

版权

笔记专栏收录该内容

43 篇文章 0 订阅

订阅专栏

ajax的优点与缺点：

优点：异步模式，提升用户体验
	 减少不必要数据传输，减少带宽占用。优化浏览器和服务器的传输
	 ajax引擎在客户端运行，承担了一部分服务器的工作，减少了大用户下服务器的负载
缺点：不支持浏览器back按钮
			安全问题：保留与服务器交互的细节
			对搜索引擎的支持比较弱

XMLHttpRequest:支持异步请求的技术，Ajax的核心

作用：1.可以向服务器提出请求并处理响应而不阻塞用户2.可以页面加载以后进行页面的局部更新

如何食用ajx

1.创建XMLHttpRequest对象；
2.创建一个新的HTTP请求，并指定该HTTP请求的方法以及URL
3.设置响应HTTP请求状态变化的函数（习惯性放于2步之前）
4.发送HTTP请求
5.获取异步调用返回的数据
6.使用js和dom实现局部刷新

对于创建XMLHttpRequest而言：先封装了搞定各浏览器的兼容性了再var 创建对象
创建HTTP请求，open(method,url,async);method是请求的类型，规定请求的类型，URL及是否异步处理请求；method是请求的类型，get（默认）或post（绝大数用post)；url：文件在服务器的位置（必须执行），可以是任何类型如 .txt .xml或服务器脚本文件如 .asp和 .php，async:true(异步；默认)，false（同步）;open方法相当于初始化请求，并不真正发送请求，只能同域请求
get与post的区别：与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

//如果get创建请求；直接将参数在创建请求时一起传入
xhr.open("get","./serve/slider.json?user=zhangsan&id:27",true)
send(null)

xhr.open("post","./server/slider.json",true);
//如果用post发送请求需要将传入的值放入send里面
xhr.send({user:"zhangsan",id:6});
//如果用post发送请求，需要设置头部信息
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")

设置响应HTTP请求状态变化的函数（收到响应后相应四个属性会被填充）

responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。
status:从服务器返回的数字代码，如404（未找到）和200（已就绪）
status Text:伴随状态码的字符串信息

readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status ：200: “OK”；404: 未找到页面
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。改变一次加1

//当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css" />
</head>

<body>
    <div class="banner" id="banner">
    </div>
    <div class="banner" id="banner_jq"></div>
    <script src="js/jquery-1.7.1.js"></script>
    <script>
        // 封装通用的xhr,兼容各个版本
        function createXHR() {
            //判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7，Firefox，Opera等浏览器
            if (typeof XMLHttpRequest != "undefined") {
                return new XMLHttpRequest();
            } else if (typeof ActiveXObject != "undefined") {
              //将所有可能出现的ActiveXObject版本放在一个数组中
              var xhrArr = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
              //遍历创建XMLHttpRequest对象
              var len = xhrArr.length;
              for (var i=0;i<len;i++)
              {
                  try
                  {
                      //创建XMLHttpRequest对象
                      xhr = new ActiveXObject(xhrArr[i]);
                      //如果创建XMLHttpRequest对象成功，则跳出循环
                      break;
                  }
                  catch(ex)
                  {
                  }
              }
            } else {
                throw new Error("No XHR object available.");
            }
        }

        var xhr = createXHR(),
            data = null; //用于接收服务器端返回的数据
        //响应XMLHttpRequest对象状态变化的函数
        xhr.onreadystatechange = function () {
            //异步调用成功
            if (xhr.readyState === 4) {
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                    //获得服务器返回的数据；学会看network
                    //如果在没转换之前 typeof xhr.responseText;返回的是字符串类型
                    data = JSON.parse(xhr.responseText);
                    // 渲染数据
                    renderDataToDom();
                } else {
                    console.log('unsuccess');
                }
            }
        };
        //创建http请求
        xhr.open('get', './server/slider.json', false);
        //发送http请求
        xhr.send(null);

        // 渲染数据
        function renderDataToDom(){
            var img = data.slider,i,
                len = img.length,str = "",
                banner = document.getElementById("banner");
            // 遍历数据,拼接字符串
            for(i=0;i<len;i++){
                str+='<a href="'+img[i].linkUrl+'"><img src="'+img[i].picUrl+'"></a>'
            }
            // 渲染图片信息
            banner.innerHTML = str;
        }

        // jquery请求
        $.ajax({
            url:"./server/slider.json",
            type:"post",
            dataType:"json",
            async:true,
            success:function(datas){
                renderData(datas.slider);
            }
        })

        // jquery渲染数据
        function renderData(data){
            var str = "";
            $.each(data,function(index,obj){
                str+='<a href="'+obj.linkUrl+'"><img src="'+obj.picUrl+'"></a>'
            })
            $("#banner_jq").html(str);
        }

        // 封装一个jsonp函数,实现跨域
        function getJSONP(url, callback) {
            if (!url) {
                return;
            }
            var a = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']; //定义一个数组以便产生随机函数名
            var r1 = Math.floor(Math.random() * 10);
            var r2 = Math.floor(Math.random() * 10);
            var r3 = Math.floor(Math.random() * 10);
            var name = 'getJSONP' + a[r1] + a[r2] + a[r3];
            var cbname = 'getJSONP.' + name; //作为jsonp函数的属性
            if (url.indexOf('?') === -1) {
                url += '?jsonp=' + cbname;
            } else {
                url += '&jsonp=' + cbname;
            }
            var script = document.createElement('script');
            //定义被脚本执行的回调函数
            getJSONP[name] = function (e) {
                try {
                    callback && callback(e);
                } catch (e) {
                    //
                } finally {
                    //最后删除该函数与script元素
                    delete getJSOP[name];
                    script.parentNode.removeChild(script);
                }

            }
            script.src = url;
            document.getElementsByTagName('head')[0].appendChild(script);
        }
        // 应该是接口有问题
       /* getJSONP('http://www.imooc.com/api/home/slider/', function (response) {
            console.log(response.name);
        });*/
    </script>
</body>

</html>

Json：javascript对象表示法；一种数据交换的文本格式，不是编程语言，读取结构化的数据，取代繁琐笨重的XML格式

JSON 值可以是：

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）：创建对象数组之后可以用索引值返回里面的对象或修改；var employees = [
		{ "firstName":"Bill" , "lastName":"Gates" },
		{ "firstName":"George" , "lastName":"Bush" },
		{ "firstName":"Thomas" , "lastName": "Carter" }
];
对象（在花括号中）：{ "firstName":"John" , "lastName":"Doe" }
null

JSON对象的stringify()和parse（）两个方法可以分别用于js对象序列化为JSON字符和把JSON字符解析为原生js值
eval()类似于JSON.parse（），但是eval（）可以执行不符合json格式的代码，可能含有恶意代码

如何解决跨域：1.跨域资源共享（CORS）2.使用JSONP(常用)3.修改document.domain 4.使用window.name

jsonp的原理：1.通过script标签引入js文件 2.js文件载入成功后3.执行我们在url参数中指定的函数

jsonp的组成:回调函数（当响应到来时应该在页面中调用的函数）和数据（传入回调函数中的JSON数据）

weixin_47204963

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax与Json

ajax的优点与缺点：优点：异步模式，提升用户体验减少不必要数据传输，减少带宽占用。优化浏览器和服务器的传输 ajax引擎在客户端运行，承担了一部分服务器的工作，减少了大用户下服务器的负载缺点：不支持浏览器back按钮安全问题：保留与服务器交互的细节对搜索引擎的支持比较弱XMLHttpRequest:支持异步请求的技术，Ajax的核心作用：1.可以向服务器提出请求并处理响应而不阻塞用户2.可以页面加载以后进行页面的局部更新如何食用ajx1.创建XMLHttpRequ
复制链接

扫一扫