ajax技术详解
ajax概念ajax全称叫Asynchronous JavaScript and XML,意思是异步的 JavaScript 和 XML。 ajax是现有标准的一种新方法,不是编程语言,可以在不刷新网页的情况下,和服务器交换数据并且更新部分页面内容,不需要任何插件,只需要游览器允许运行JavaScript就可以。 而传统的网页(不使用ajax的)如果需要更新页面内容,就需要重新请求服务器,返回网页内容,重新渲染刷新页面。 ajax的原理原理:ajax的运行过程包括以下几个方面
注意:ajax依赖的标准有以下几个
XMLHttpRequest的使用创建 var xhr = new XMLHttpRequest() || new ActiveXObject(‘Microsoft.XMLHTTP‘); // 兼容ie和Firefox,google chrome,opera,safari 发送请求使用 open方法使用
例如: xhr.open(‘get‘,‘https://www.abc.com/service.php?tamp=‘+Date.parse(new Date()),true); send方法使用
例如: send(‘tamp=‘+Date.parse(new Date()); onreadystatechange事件当readyState属性发生变化时,就会触发onreadystatechange事件,该事件通过回调函数获取到响应的数据信息。 readyState值:
status值:
简单的get请求。var xhr; if (!xhr && typeof xhr !== ‘object‘) { var xhr = new XMLHttpRequest() || new ActiveXObject(‘Microsoft.XMLHTTP‘); } xhr.open(‘get‘,true); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { console.log(xhr.responseText); } } } xhr.send(); 模拟数据模拟的JSON数据// 保存为data.json文件 { "msg": "get_succ","code": 201,"data": { "list": [ { "id":1,"name": "alun" },{ "id":2,"name": "mark" },{ "id":3,"name": "jean" } ] } } 模拟的Nodejs的api
// 保存为node.js文件 // 引入http模块 const http = require(‘http‘); const port = 3000; const success = { msg: "get_succ",code: 201,data: { list: [ {"id":1,"name": "alun"},{"id":2,"name": "mark"},{"id":3,"name": "jean"} ] } } const error = { msg: "get_fail",code: 101,data: { info: ‘this request failed,again try!‘ } } const authy = { msg: "no visited!",code: 403,data: { info: ‘not visited!‘ } } // 建立http服务 const serve = http.createServer((req,res) => { var lawDomainList = "http://localhost:9925"; res.setHeader(‘Content-Type‘,‘text/plain;charset=utf8‘); res.setHeader("Access-Control-Allow-Origin",lawDomainList); if (req.url == ‘/api‘) { res.end(JSON.stringify(success)); } else { res.end(JSON.stringify(error)); } res.end(authy); }) // 监听端口 serve.listen(port,function(){ console.log(‘serve is running on port 3000!‘); }) 封装的ajax函数// 保存为ajax.js文件 $g = { get: function(url) { return new Promise(function(resolve,reject) { if (!url && !(typeof url == ‘string‘)) { throw new Error(‘SysantaxError: this get request must had url!‘); } var xhr = new XMLHttpRequest() || new ActiveXObject(‘Microsoft.XMLHTTP‘); xhr.open(‘GET‘,true); xhr.onreadystatechange = function() { if (this.readyState === 4) { if (this.status === 200) { resolve(this.responseText,this); } else { var resJson = { code: this.status,response: this.response } reject(resJson,this) } } } xhr.send(); }) },post: function(url,data) { return new Promise(function(resolve,reject) { if (!url) { throw new Error(‘SysantaxError: this post request must had url!‘); } if (!data) { throw new Error(‘SysantaxError: this post request must had data!‘); } var xhr = new XMLHttpRequest() || new ActiveXObject(‘Microsoft.XMLHTTP‘); xhr.open(‘POST‘,true); xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘); xhr.onreadystatechange = function() { if (this.readyState === 4) { if (this.status === 200) { resolve(this.responseText,this) } } } xhr.send(JSON.stringify(data)); }) } } 示例:获取数据渲染页面
<button class="btn">请求数据</button> <ul class="res">结果:暂无结果</ul> <script src="ajax.js"></script> let btn = document.querySelector(‘.btn‘); let resbox = document.querySelector(‘.res‘); btn.onclick = function() { var url = ‘http://localhost:3000/api‘; // node api var urlJson = ‘data.json‘; // mock api $g.get(url).then(function(res) { if (typeof res == ‘string‘) { let responTxt = JSON.parse(res); if (responTxt.msg == ‘get_succ‘ && responTxt.code == 201) { let list = responTxt.data.list; let str = ‘‘; for (let i=0;i<list.length;i++) { str += ‘<li>‘+ list[i].id + ‘:‘ + list[i].name + ‘</li>‘; } resbox.innerHTML = str; } } }).catch(function(err){ throw new Error(err); }); } 写在最后这只是我总结的一小部分知识点,其实这个技术还是有很多地方没有说到,以后再补充吧! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |