一, Ajax 简单整理
1.Ajax 是什么?
Ajax 这种技术是指无需刷新页面即可从服务器取得数据.
Ajax 的核心是 XMLHttpRequest 对象, 简称 XHR
2.XMLHttpRequest 对象
如果要使用 XHR 对象很简单, 只需要如下:
var xhr = new XMLHttpRequest();
但如果需要兼容, 那就需要构建一个函数:
- function creatXHR() {
- if(typeof XMLHttpRequest != 'undefined') {
- return new XMLHttpRequest();
- } else {
- return new ActiveXObject('Microsoft.XMLHTTP');
- }
- }
- var xhr = creatXHR();
3.XHR 的用法
在使用 XHR 对象时, 需要调用两个方法, 一个 open() 方法, 一个 send() 方法.
其中, open() 接收 3 个参数, 如下:
xhr.open('GET', 'json/data.json', false);
说明:
第一个参数: 启动一个针对 data.JSON 的 GET 请求; 这个参数可以有 GET/POST.
第二个参数: URL(可以是绝对路径也可以是相对路径)
第三个参数: false/true, 是否异步
注意:
调用 open() 方法并不会真正的发送请求, 它只是启动一个请求以备发送, 完整的发送特定请求如下:
- xhr.open('GET', 'json/data.json', false);
- xhr.send();
4.XHR 的属性
在收到响应后, 响应的数据会自动填充 XHR 对象的属性, 其属性如下:
responseText: 作为响应主体被返回的文本.
responseXML: 如果响应的内容类型是 "text/xml" 或 "application/xml", 这个属性中将保存包含着响应数据的 xml DOM 文档.
status: 响应的 HTTP 状态 [200 是成功, 304 是资源没有修改过]
statusText: HTTP 状态的说明
二, 用 Ajax 获取本地 JSON 数据
- <script>
- function creatXHR() {
- if(typeof XMLHttpRequest != 'undefined') {
- return new XMLHttpRequest();
- } else {
- return new ActiveXObject('Microsoft.XMLHTTP');
- }
- }
- var xhr = creatXHR();
- xhr.open('GET', 'json/data.json', false);
- xhr.send();
- if(xhr.status>= 0 && xhr.status <300 || xhr.status == 304) {
- var comentList = JSON.parse(xhr.responseText).user;
- var html = ""
- for(var i = 0; i < comentList.length; i++) {
- var star = `<p>id="${comentList[i].id}",name="${comentList[i].name}"</p>`
- HTML += star;
- }
- document.getElementById('outer').innerHTML = HTML;
- }
- </script>
如果用 Jq 就更简单了:
- $(function(){
- $.Ajax({
- type:'GET',
- url: "./json/data.json",
- dataType: "json",
- success: function(data){
- var comentList = data.user;
- $.each(comentList, function(i,item) {
- var str = `
- <p>id=${item.id},name=${item.name}</p>
- `;
- $('#outer').append(str);
- });
- }
- })
- })
来源: http://www.jianshu.com/p/96ba4087179d