JSON与XML都是常见的数据格式
JSON(JavaScript Object Notation)轻量级数据格式
XML 是一种可扩展标记语言,与HTML都是标记语言
JSON与XML

JSON的优势:
轻量级,体积小,节省流量,提高加载速度
解析成原生JS对象,解析比XML更快
查找数据无需查找标签,更快

在数据传输流程中,JSON是以文本即字符串的形式传递的,而JS操作的是JSON对象
所以,JSON对象和JSON字符串之间的相互转换是关键:

var json1 = '{ "name": "cxh", "sex": "man" }'; // JSON字符串
var json2 = { "name": "cxh", "sex": "man" }; //  JSON对 象

由JSON字符串转换为JSON对象

方法一. var obj1 = eval('(' + json1 + ')'); // js内建方法
方法二. var obj2 = json1.parseJSON();
方法三. var obj3 = JSON.parse(json1); // 需严格的json格式

将JSON对象转化为JSON字符串

方法一. var str1=json2.toJSONString();
方法二. var str2=JSON.stringify(json2);

ajax是什么

AJAX => Asynchronous Javascript And XML
直译:异步的 JavaScript 和 XML
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术(局部刷新)

通俗的讲,AJAX就是JS通过一个网址去加载数据,这个过程通常是用户不可见的
传统的网页(不使用 AJAX)如果需要更新内容,必需重新加载整个网页

生活中的同步和和异步:
同步:先煮完饭后,再去烧菜。 (一个时间段内,事情按照顺序做)
异步:煮饭同时也在烧菜。(一个时间段内,事情不按顺序做)

在程序中,同步和异步的区别就是在于代码的执行顺序。
同步代码按照顺序运行,异步代码不按照顺序运行。

ajax如何使用

XMLHttpRequest 对象可以与服务器交互数据
主流W3C标准浏览器都支持XMLHttpRequest对象(ajax对象)

低版本的IE浏览器(IE5 和 IE6) 使用 ActiveXObject

1.创建ajax对象

if(window.XMLHttpRequest){ // 非IE5 IE6
    var xhr=new XMLHttpRequest();
}else{ // IE5 IE6
    var xhr=new ActiveXObject("Microsoft.XMLHTTP");
};

2.连接服务器
xhr.open(method,url,async);
参数 说明:
method:请求的类型 get 或 post
url:文件在服务器上的位置(数据地址)
async:可选,默认true(异步), false(同步)
同步需要等待返回结果才能继续,异步不必等待
通常使用异步(true),不推荐使用同步(false)
如:xhr.open('get','test.php',true);

请求方法

3.将请求发送到服务器
xhr.send(param);
param:对于get请求,参数为空或null
如:xhr.send(null);

param:对于post请求,参数为发送到服务器的数据
如:xhr.send('name=xiaoming&age=24');

为post请求时,需要在send()之前设置http请求头:作用是模拟表单post来传递参数
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

get和post区别

  • get参数通过url传递,post放在请求体(request body)中;
  • get请求在url传递的参数有长度限制,而post没有;
  • get比post更不安全,因为参数直接显示在url地址中,所以不能传递敏感数据;
  • get请求浏览器会主动缓存,而post不会;
  • get请求参数会保存在浏览历史记录,而post请求不会;
  • get和post本质上都是tcp连接。

4.服务器响应情况
readyState 属性存有XMLHttpRequest对象的状态
readyState 会从 0 到 4 发生变化:
0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收
3: 请求处理中 4: 请求已完成
当 readyState 改变时就会触发 onreadystatechange 事件

status:http请求的状态码
状态码代表着http请求是成功还是失败等信息。
下面是常见的HTTP状态码(HTTP Status Code):

* 200:请求成功
* 301:网页被重定向到其它URL
* 304:文件未被修改,使用缓存资源
* 404:找不到此网页(指定的资源)
* 500:服务器内部错误

更多状态码: https://www.runoob.com/http/http-status-codes.html

readyState为 4 且 status为 200 时,表示响应已就绪,请求成功

xhr.onreadystatechange=function (){
    if (xhr.readyState==4) { // 请求完成
        if (xhr.status==200) { //ok 成功
            alert( xhr.responseText ); // 得到响应结果
        } else{
            alert( xhr.status ); // 弹出失败的状态码
        };
    };
}

xhr.responseText 获得文本形式的响应数据
xhr.responseXML 获得 XML 形式的响应数据

Last modification:October 17th, 2019 at 08:30 pm
如果觉得我的文章对你有用,请随意赞赏