json&&ajax

时间 2020-10-21

标签 javascript php html java ajax 数据库编程 json 跨域数组栏目 JavaScript 繁體版

原文原文链接

Json&Ajax
Ajaxjavascript

1.为何要使用Ajax
经过异步模式，提高了用户体验
优化了浏览器和服务器之间的传输，减小了没必要要的数据往返，减小了带宽占用
Ajax引擎在客户端运行，承担了一部分原本由服务器承担的工做，从而减小了大用户量下的服务器负载php

缺点：
不支持浏览器back按钮
安全问题，ajax暴露了与服务器交互的细节
对搜索引擎的支持比较弱
2.什么是XMLHttpRequest对象
是一种异步请求的技术，它是Ajax的核心
应用：
能够向服务器提出请求并处理响应，而不阻塞用户
能够在页面加载以后进行页面的局部更新html

3.如何使用Ajax
第一步：建立XMLHttpRequest对象，也就是建立一个异步调用对象
第二步：建立一个新的HTTP请求，并制定该HTTP请求的方法，URL
第三步：设置响应HTTP请求状态变化的函数
具体步骤：
第一步：建立XMLHttpRequest对象java

<!DOCTYPE html>
<html>
<head>
    <title>ajax</title>
</head>
<body>
    <script type=“text/javascript”>
    //封装通用的xhr对象，兼容各个版本
    function creatXHR(){         //判断浏览器是否将XMLHTTPRequest做为本地对象实现，针对IE7，firefox，opera等
        if(typeof XMLHttpRequest != “undefined”){
            return new XMLHttpRequest();
        }else if(typeof ActiveXObject !=“undefined”){
            //将全部可能出现的版本放在一个数组中
            var xhrArr =[‘Microsoft.XMLHttp’, ‘ MSXML2.XMLHttp.6.0’ ,‘     MSXML2.XMLHttp.5.0’,‘ MSXML2.XMLHttp.4.0’,‘ MSXML2.XMLHttp.3.0’,‘ MSXML2.XMLHttp.2.0’];
            //须要遍历建立XMLHttpRequest
            var len = xhrArr.length;
            for(var i =0;i<len;i++){
                try{
                //建立XMLHttpRequest对象
                    xhr = new ActiveXObject(xhrArr[i]);
                    break;
                }
                catch(ex){
                }
                return xhr;
            }else{
                throw new Error(‘No XHR object availabel.’);
            }
        }
    }
    var xhr = createXHR();
    </script>
</body>
</html>

第二步：如何建立HTTP请求
open方法：open(method,url,async)
功能：建立HTTP请求，规定请求类型，URL以及是否异步处理请求
method:请求类型，get或post，默认get
url：文件在服务器的位置
async：true（异步）或者false
⚠：open方法不会向服务器发送真正的请求，它至关于初始化请求并准备发送只能向同一个域中使用相同协议和端口的URL发送请求，不然会由于安全缘由报错
url参数是open()方法中惟一一个必需要指定的参数，用来设置服务器上文件的地址，该文件能够是任何类型的文件，如.txt 和 .xml，或者服务器脚本文件，如.asp和.phpajax

important：
get与post的区别
与post相比，get更简单也更快，而且在大部分状况下都能用，然而，在如下状况中，必须使用post请求
1.没法使用缓存文件（更新服务器上的文件或数据库）
2.向服务器发送大量数据（post没有数据量限制）
3.发送未知字符的用户输入数据库

同步和异步的区别：
同步：提交请求－－>等待服务器处理－－>处理完毕返回这个期间客户端浏览器不能干任何事
异步：请求经过事件触发－－>服务器处理（这时候浏览器仍然能够作其余事情）－－>处理完毕编程

async：
是一个boolean值，默认为true表明异步json

第二步建立请求：
xhr.open(“get”,./server/slider.json”.true);跨域

如何使用Ajax
1.建立XMLHttpRequest对象，也就是建立一个异步调用对象
2.建立一个新的HTTP请求，并指定该HTTP请求的方法，URL
3.设置响应HTTP请求状态变化的函数
分为三步：请求发送服务器－－服务器根据请求生成响应－－传回给XHR对象数组

第三步：

//响应xmlhttprequest对象状态变化，onreadystatechange在readystatechange属性发生////改变时触发
xhr.onreadystatechange ＝ function(){
    //异步调用成功,响应内容解析完成(xhr.ready===4,status>=200表示异步调用成／////功，能够在客户端调用，304表示请求资源没有被修改，表示以前请求成功过，并且和//上一次没有发生改变
    if(xhr.ready===4){
        if(xhr.status >=200 && xhr.status <300) || xhr.status ===304){
        //得到服务器返回的数据
        
        }
    }
}

如何发送
语法：send(string)
功能：把请求发送给服务器
参数说明：string仅用于post请求

⚠：仅在post请求时能够传入参数，不须要发送null，在调用send方法以后请求被发送服务器
如何添加HTTP头
若是须要像HTML表单那样POST数据，需使用setRequestHeader()来添加HTTP头，而后在send()方法中规定但愿发送的数据
语法：xmlhttp.setRequestHeader(header,value)
使用：xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
写在建立请求后面
xhr.send(null);
xhr.setRequestHeader(“Content-type’
如何获取异步调用的数据
在收到响应后相应数据会填充到XHR对象的属性，有四个相关属性会被填充

－responseText:从服务器进程返回数据的字符串形式
-responseXML：从服务器进程返回的DOM兼容的文档数据对象
-status：从服务器返回的数字代码，如404（未找到）和200（已就绪）
-status Text：伴随状态码的字符串信息

json
什么是json
json全称是javascript对象表示法，它是一种数据交换的文本格式，而不是一种编程语言，用于读取结构化数据，目的是取代繁琐笨重的XML格式
json的语法规则

1简单值：
简单值使用和JS相同的语法，能够在JSON中表示字符串，数值，Boolean值，和null
字符串必须用双引号表示，不能使用单引号，数值必须以十进制表示，且不能使用NaN和infinity
⚠：JSON不支持JS中的特殊值undefined

2.对象：
JSON中对象的键名必须放在双引号里面，由于JSON不是JS语句，因此没有末尾的分毫
⚠：同一个对象中不该该出现两个同名属性

3.数组
数组也是一种复杂的数据类型，表示一组有序的值的列表，能够经过数值索引来访问其中的值
⚠：数组或对象最后一个成员的后面，不能加逗号

JSON对象
JSON对象的两个使用方法：
1.parse()
语法：JSON.parse()
功能：用于将JSON字符串转化成JS可用的对象
2.stringify()
用于将一个值转换为字符串，该字符串应该符合JSON格式，而且能够被JSON.parse()方法还原。把js的对象转换成JSON格式的字符串
JSON对象总结
－JSON之因此流行，是由于能够把JSON数据结构解析为有用的JS对象
－JSON对象的stringify(()和parse()这两个方法能够分别把用JS对象序列化为JSON字符串和把JSON字符串解析为原生JS值
－JS的eval()相似于JSON.parse()方法，能够将json字符串转换为json对象可是，eval()执行不符合JSON格式的代码，有可能包含恶意代码

data.JSON.parse(xhr.responseText)
jQuery的ajax方法
$.ajax()
$.ajax({
    url: “./server/slider.json”,//请求地址
    type:”post”,                       //请求方式
    async:true            //同步异步
    dataType:”json”        //数据格式
    success:function(imgData){
        console.log(imgData);
    }
});                    //请求成功的回调
$.get()
$.post()
$.getJson()

什么是跨域：
在用open这个方法的时候，有一个接口
同源策略：同源是指域名，协议，端口均相同
如何解决跨域：
1.跨域资源共享
2.使用JSONP：JSONP是应用JSON的一种新方法，也是一种跨域解决方法

JSONP由两部分组成，回调函数和数据，回调函数是当响应到来时应该在        页面中调用的函数，而数据就是传入回调函数中的JSON数据
    JSONP的原理：直接使用XMLHttpRequest请求不一样域上的数据时，是不能够的，可是在页面上引入不一样域上的js脚本文件倒是能够的，jsonp正是利用这个特性来实现的，步骤：1。经过script标签引入js文件2.js文件载入成功后3.执行咱们在url中指定的参数

2.修改document.domain
4.使用window.name
跨域封装&&跨域url处理

function getJSONP(url,callback){
    if(!url){
        return;
    }
    //声明一个数组来随机生成函数名
    var a =[‘a’,’b’,’c’,’d’,’e’,’f’,’g’,’h’,’i’,’j’],
        r1 = Math.floor(Math.random()*10),
        r2 = Math.floor(Math.random()*10),
        r3 = Math.floor(Math.random()*10),
        name = ‘getJSONP’ + a[r1]+a[r2]+a[r3],
        cbname = ‘getJSONP.’+name;
        //判断url中是否还有问好
        if(url.indexOf(‘?’)===-1){//跨域url处理
            url+=‘?jsonp=‘ + cbname;
        }else{
            url+=‘&jsonp=‘ +cbname;
        }
        //动态建立script标签
        var script = document.createElement(‘script’);
        //定义被脚本执行的回调函数
        getJSONP[name] = function(data){
            try{    
                callback && callback(data);
            }catch(e){
            }
            finally{
                delete getJSONP[name];
                script.parentNode.removeChild(script);
            }
        }
        //定义script中的src
        script.src = url;
        document.getElementByTagName(“head”)[0].appendChild(scrpt);
    }

getJSONP