泰安微信网站建设,网络营销的发展现状如何,浙江城乡与住房建设部网站,建站快车管理AJAX简介#xff1a;
ajax背景#xff1a;
1.AJAX(Asynchronous JavaScript And Xml)异步的 JavaScript 和 XML:ajax是浏览器提供的一套API#xff0c;最早出现在谷歌浏览器#xff0c;是在浏览器端进行网络编程(发送请求、接收响应)的技术方案。它可以使我们通过JavaScr…AJAX简介
ajax背景
1.AJAX(Asynchronous JavaScript And Xml)异步的 JavaScript 和 XML:ajax是浏览器提供的一套API最早出现在谷歌浏览器是在浏览器端进行网络编程(发送请求、接收响应)的技术方案。它可以使我们通过JavaScript直接获取服务端最新的内容而不必重新加载页面让web更接近桌面应用的体验。
2.涉及到ajax操作的界面‘不能’使用文件协议(文件的方式)访问实际是可以访问的。
3.ajax是一套API核心提供的类型XMLHttpRequest其使用步骤如下 script// 1.创建 XMLHttpRequest 对象xhr就类似浏览器的作用(发送请求 接收响应)var xhr new XMLHttpRequest(); //xhr变量名可以为其它名,习惯使用xhr;此对象有兼容问题解决方法如下// 解决ajax的IE5-6兼容问题var xhr window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXOBject(Microsoft.XMLHTTP);// 2.打开浏览器输入网址,可以是服务端任何文件比如 .txt或.phpxhr.open(GET, http://day-03.io/6.Ajax练习/01.ajax的背景/time.php); //第一个参数为请求方式第二个参数为请求地址// 3.发送一个请求如果是post请求方式send里面可以传请求体后面详细讲xhr.send();// 4.响应因为客户端永远不知道服务端何时才能返回我们的需求响应所以ajax API 采用时间机制(类似通知的方式)xhr.onreadystatechange function() {// 这里this.readyState有三个阶段2,3,4写在xhr.open()下面会有状态1的出现如果需要捕获第一个状态的变化需要注意代码执行顺序的问题有0-4五个状态四个阶段if (this.readyState ! 4) return;//只有状态4表示请求响应已经完成此时可以对数据进行操作// 5.看结果console.log(this.responseText); //responseText可以接收到响应体response也可以接收的响应体但是有区别};/scriptajax中五种状态四种阶段代表什么
ajax有五个状态四种阶段分别代表如下xhr.readyState的返回值 scriptvar xhr new XMLHttpRequest();console.log(xhr.readyState);// 0初始化请求代理对象xhr.open(GET, time.php);console.log(xhr.readyState);// 1open 方法已经调用建立一个与服务端特定端口的连接xhr.send();xhr.addEventListener(readystatechange, function() {switch (this.readyState) {case 2:// 2:已经接收到了响应报文的响应头但是还没有拿到体this.getAllResponseHeaders()用来获取响应头console.log(this.getResponseHeader(server));console.log(this.responseText);break;case 3:// 3正在下载响应报文的响应体有可能响应体为空也有可能不完整这里不能保证响应体数据的完整性console.log(this.responseText);break;case 4:// 4一切 OK 整个响应报文已经完整下载下来了请求体的数据是完整的console.log(this.responseText);break;};});/scriptscriptvar xhr new XMLHttpRequest(); //----安装一个浏览器console.log(xhr.readyState); //--------------0初始化请求代理xhr.open(GET, time.php); //打开一个浏览器建立一个与服务端端口的连接console.log(xhr.readyState); //--------------1建立一个与服务端端口的连接xhr.send(); //发送请求console.log(xhr.readyState); //--------------1// 用addEventListener()的方式注册事件xhr.addEventListener(readystatechange, function() {// if (this.readyState!4) return;console.log(this.readyState); //-------------4,如果是注释掉上面的if条件那么这里打印的值为234,分别表示// 2已经接收到响应体的响应头还没有拿到响应体// 3正在下载响应体中// 4已经下载完一个完整的响应体console.log(this.response); //服务端响应的东西this.responseText也可以拿到响应体// 在可以使用this的作用域建议使用this因为这样可避免沿着作用域链一级一级的向下找优化了性能。});/scriptonload事件代替readystatechange事件
onload事件实现readystatechange事件效果 scriptvar xhr new XMLHttpRequest();xhr.open(GET, time.php);xhr.send(null); xhr.onload function() { //onload事件可以代替readystatechange事件但是onload有兼容性问题因此实际开发中依然不会使用onloadconsole.log(this.readyState);console.log(this.responseText);};/scriptajax遵循http协议
ajax遵循http协议进行发送请求在ajax中以post方式进行请求时注意设置请求头中content-type属性及值send()中以urlencoded格式设置请求体如 scriptvar xhr new XMLHttpRequest();xhr.open(POST, add.php); //以POST的方式请求一个地址//xhr.setRequestHeader(keyA, valueA); //setRequestHeader用来设置一个请求头内容// 请求体是 urlencoded 格式的内容一定要设置请求头中的Content-Type 为application/x-www-form-urlencoded才可以正常请求xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);xhr.send(key1value1key2value2); // 以 urlencoded 格式设置请求体/script数据接口
数据接口能提供特定的能力有输入有输出返回数据的地址如下面服务端代码的URLusers.php即为一个数据接口详细如下
服务端代码 ?php//这里使用假数据做测试实际开发中可能会从数据库获取数据$dataarray(array(id1,name法海,age39),array(id2,name如经,age14),array(id3,name道号,age19));//当收到ajax发送的请求是做出相应的数据返回if(empty($_GET[id])){// 没有传递id返回所有数据因为http协议中约定报文的内容是字符串所以需要用json数据格式$json json_encode($data);//返回json字符串[{id:1,name:法海,age:39},{id:2,name:如经,age:14},{id:3,name:道号,age:19}]echo $json;}else{foreach ($data as $item){if($item[id]!$_GET[id]) continue;$json json_encode($item);//[{id:1,name:\u5e08\u5085,age:39}]echo $json;};};
通过ajax请求数据接口的数据 scriptvar listElement document.getElementById(list);var xhr new XMLHttpRequest();xhr.open(GET, users.php?id this.id); //这里可以使用传参请求到具体的值若不传入参数则拿回所有数据遍历在一个readystatechange事件中可以继续new XMLHTTPRequest()请求数据xhr.send();xhr.onreadystatechange function() {if (this.readyState ! 4) return;var data JSON.parse(this.responseText); //将json字符串转换为json对象//通过遍历的方式对数据data进行处理(渲染到页面)for (var i 0; i data.length; i) {console.log(data[i].id -- data[i].name --- data[i].age); //打印拿到的所有数据};};/scriptresponseText和response区别
responseTexxt返回的是普通字符串的形式的数据不能通过 xhr.responseType数据类型’设置返回的数据类型response可以通过 xhr.responseType数据类型’设置返回的数据类型。 scriptvar xhr new XMLHttpRequest();xhr.open(GET, test.php);xhr.send();xhr.responseType json; //有兼容问题xhr.onreadystatechange function() {if (this.readyState 4) {// console.log(this.responseText);console.log(this.response);};};/script通过ajax发送post请求
以post方式提交数据需要注意如果请求体是urlencoded格式需要设置请求头的content-type如
以post方式通过ajax提交密码和用户名 script// 假设给按钮注册点击事件执行ajax请求提交数据getElement(btn).onclick function() {// 假设获取input中的值并给变量var username getElement(username).value;var password getElement(password).value;var xhr new XMLHttpRequest(); //在js中开启一个浏览器xhr.open(POST, data.php); //打开浏览器并访问data.php//如果请求体是 urlencoded 格式 必须设置请求头为Content-Type,application/x-www-form-urlencodedxhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);// xhr.send(username username password password)发送请求体字符串拼接不好操作推荐使用模板字符串xhr.send(username${username}password${password});// 3. 根据服务端的反馈 作出界面提示xhr.onreadystatechange function() {if (this.readyState ! 4) return;console.log(this.responseText); //若服务端有数据返回则接收(服务端各个处理的反馈)};};/script服务端对用户名和密码做校验并做反馈 ?php// 判断是否提交数据并做出反馈if(empty($_POST[username])||empty($_POST[password])){exit(请提交用户名和密码);};// 接收客户端传过来的数据并给变量$username$_POST[username];$password$_POST[password];// 校验数据通常使用数据库中的数据这里使用假数据做测试if($usernameadmin $password123){exit(登录成功);};exit(用户名或者密码错误);同步与异步模式
同步模式在相同的时间内只能做一件事情ajax 操作会有楞等的情况区别在于 send 方法会不会出现等待情况
异步模式在相同的时间内可以做不同的事情比起同步模式异步处理时间更短但是时间差异不是很大一般需要使用console.time()方法进行测试时间。
xhr.open()中的第三个参数async是控制是否开启异步模式值为布尔值默认是true则表示异步 script// 同步模式加载时间长var xhrSync new XMLHttpRequest()// open 方法的第三个参数是 async 可以传入一个布尔值默认为 truexhrSync.open(GET, time.php, false) //关闭异步模式console.time(sync)xhrSync.send() //关闭异步模式后等待请求响应的过程完全完成后再继续console.log(xhrSync.responseText)// console.log(end request)console.timeEnd(sync)// 异步模式加载时间短var xhrSync new XMLHttpRequest()// open 方法的第三个参数是 async 可以传入一个布尔值默认为 truexhrSync.open(GET, time.php, true) //打开异步模式默认是打开的console.time(sync)xhrSync.send()console.log(xhrSync.responseText)// console.log(end request)console.timeEnd(sync)/scriptajax请求XML数据
XML数据格式类似存在html标签中的内容但是标签需要大写文件后缀名为xml;ajax请求服务端xml数据时需要指明响应头中content-type为application/xml如
ajax请求代码 script// 一般服务端响应一个简单的数据就是一个字符串如果想要返回一个复杂的数据一般采用json的格式但是有很多老项目采用xml的方式存数据此时也是需要获取数据的如// ajax请求XML格式的数据var xhr new XMLHttpRequest();xhr.open(GET, xml.php);xhr.send();xhr.onreadystatechange function() {if (this.readyState ! 4) return;// this.responseXML 是专门用于获取服务端返回XML数据的操作方式就是通过DOM(节点)的方式操作,但是需要服务端响应头中的 Content-Type 必须是 application/xml// header(Content-Type: application/xml);---需要服务端响应头中的 Content-Type 必须是 application/xmlconsole.log(this.responseXML.documentElement.children[0].innerHTML)console.log(this.responseXML.documentElement.getElementsByTagName(name)[0])}/script服务端XML数据 ?phpheader(Content-Type: application/xml);//告知响应头中响应文档类型为xml??xml version1.1 encodingutf-8?personname小明/nameage14/agegender男/gender/person!-- 上面不能有空行否则报错 --封装ajax函数
实际开发中使用ajax获取数据的地方很多为了节省开发成本一般是将ajax封装成一个函数使用时调用即可我封装了一个名为ajax的AJAX数据请求函数其中参数解释为
method必须请求方式,
url必须,请求路径
askbody可选参数,当不需要向服务端传入参数时可以给null占位但是不能不写
callback必须一个用来处理响应数据的回调函数回调函数中的参数即为响应结果 scriptfunction ajax(method, url, askbody, callback) {method method.toUpperCase(); //当调用者输入的请求方式为小写字母时转大写var xhr window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXOBject(Microsoft.XMLHTTP); //解决兼容问题//默认请求体是字符串形式的当调用者输入的是对象形式时需要转换为字符串形式if (typeof askbody object) {var arr []; //定义一个空数组用来对askbody进行拆解再拼接为字符串for (var key in askbody) {var value askbody[key]; //通过遍历的的方式将请求体对象中的键拿到并使用[键]的方式将对应的值拿到给变量valuearr.push(key value); //将键和值作为一组元素追加到数组中};askbody arr.join(); //将数组每个元素之间用符号分割后转换为字符串形式并重新给askbodyjoin可以将数组转化为字符串括号中加参数则表示给每个元素之间添加的字符。};//如果是以get方式请求:将url和askbody进行拼接:if (method GET) {url ? askbody;};xhr.open(method, url);//需要以post请求时,定义一个变量data接收请求体当为get方式请求时因为下面send中传入null或者不传,因此这里需要将data变量提升到整个函数作用域并初始值为null:var data null;if (method POST) { //当以post请求时需要传入请求体如下data askbody; //将上面处理好的askbody赋值给data变量供下面send中使用xhr.setRequestHeader(Content-type, application/x-www-form-urlencoded); //当为post请求时必须设置请求头中的Content-Type的值为application/x-www-form-urlencoded,且此代码要放到open的后面否则会报错};xhr.send(data);xhr.addEventListener(readystatechange, function() {if (this.readyState 4) {callback callback || function() {alert(请传入数据处理回调函数);};callback(this.responseText);};});};//以get方式调用ajaxajax(GET, time.php, null, function(result) {console.log(result);});//以post方式调用ajaxajax(POST, add.php, {key1: value1,key2: value2}, function(result) {console.log(result);});/scriptartTemplate引擎模板
模板引擎实际上就是一个 API模板引擎有很多种使用方式大同小异目的为了可以更容易的将数据渲染到 HTML中,这里采用artTemplatehttps://aui.github.io/art-template/ 介绍其文件实际是一个js文件。
模板属性位置
模板写在script标签中模板写在js中不便于维护script标签的特点1.innerHTML永远不会显示在界面上 2.如果script标签type属性的值不为 text/JavaScript 时内部的内容不会作为JavaScript执行
特别提醒
在art-template内部是不能访问到外面的变量的如果一定要访问的话可以使用其提供的辅助方法将外面的变量赋值给内部变量。
使用步骤 // 1.选择一个模板引擎去百度搜索,并引入这个模板的js文件script srctemplate-web.js/script// 2.准备一个模板 : each遍历数据$value拿到的是当前被遍历的那个数据,{{}}中定义某个数据或模板语法其他地方依然可以写HTMLscript idtmpl typetext/x-art-template{{each comments}}//comments为下面content中comments注意名字一致trtd{{$value.id}}/tdtd{{$value.author}}/tdtd{{$value.content}}/td/tr{{/each}}/script// 3.下面将通过ajax获取数据并将数据提供给art-template模板之后在渲染到dom中scriptvar xhr new XMLHttpRequest();xhr.open(GET, test.php);//test.php中返回数据xhr.send();xhr.onreadystatechange function() {if (this.readyState 4) {var res JSON.parse(this.responseText);//3-1:将获取到的数据给tmpl模板中的commentsvar content {comments: res.data};//3-2使用art-template模板引擎的API:template()将模板和数据整合得到渲染结果并赋值给变量var html template(tmpl, content); //3-3将要渲染的结果渲染到某dom元素中这里渲染到id名为box的div中document.getElementById(div).innerHTML html;};};/script// 4.例如在art-template中是无法访问到$ (jQuery)这个变量的如果想要访问到此变量那么可以使用art-template提供的辅助方法template.helper(art-template中变量名,function(){return jQuery;}),在使用时需要调用变量名如scripttemplate.helper(jqueryinart,function(){return jQuery;});/scriptscript idtmpl typetext/x-arttemplate{{var $ jqueryinart()}};/script同源策略和跨域请求
同源 协议 域名 端口相同的URL地址
同源策略 不同源地址之间 默认是不能相互发送ajax请求后面有解决方案
不同源地址之间如果要相互请求 必须服务端和客户端配合才可以
同源或者不同源说的是两个地址之间的关系 不同源地址之间请求我们称之为跨域请求
现代化的 Web 应用中肯定会有不同源的现象 所以必然要解决这个问题 从而实现跨域请求。跨域请求 body!-- link 真正的定义链入一个文档通过 rel 属性申明链入的文档与当前文档之间的关系 --!-- link relstylesheet hrefnprogress.css --script// 请求一个不同源的地址实际上就是我们所说的跨域请求// 校验目标1 能发出去2 能收回来// 可以发送请求的标签img link script iframe// ## 1. img// 可以发送不同源地址之间的请求// 无法拿到响应结果// var img new Image()// img.src http://test.com/categories// ## 2. link// 可以发送不同源地址之间的请求// 无法拿到响应结果// var link document.createElement(link)// link.rel stylesheet// link.href http://test.com/categories// document.body.appendChild(link)// ## 3. script// 可以发送不同源地址之间的请求// 无法拿到响应结果但是借助于JS能够执行var script document.createElement(script)script.src http://test/time.phpdocument.body.appendChild(script) // 开始发起请求 // 相当于请求的回调在服务端定义一个函数调用如echo foo({$json}})function foo(res) {console.log(res)}/script/bodyJSONP:
通过 script 标签请求一个服务端的 PHP 文件,这个文件返回的结果是一段JSphp文件作用是调用我们事先定义好的一个函数,从而将服务端想要给客户端发过去的数据以函数参数的形式发送给客户端 script srchttp://test/data.php/scriptscriptfunction myonload (data) {console.log(data)}/script服务端代码: ?phpecho myonload({time:12231234});?封装jsonp函数
实际开发中可能多次会用到跨域请求此时为了节约开发成本封装jsonp函数其参数解释
url:必须请求的路径
param可选参数用于请求时传入参数
callback必须对响应回来的数据进行处理的回调函数回调函数中的参数即为服务端响应回来的数据 scriptfunction jsonp(url, param, callback) {var functionName JSONP_ Date.parse(new Date()); //函数调用时定义一个不同的变量名if (typeof param object) { //判断param参数是否是对象若是的还将对象的形式转化为字符串形式var arr [];for (var key in param) { //通过遍历的方式将param中的对象的每一个项的键和值拼接var value param[key];arr.push(key value);};param arr.join(); //将数组转化为字符串形式并且数组每个元素之间使用分割};var script document.createElement(script); //创建一个script标签script.src url ? param callback functionName; //设置script标签的src属性值以传参的形式传入请求字符包括函数名给服务端//例如URL http://test/server.php?namejackcallbackJSONP_80284020025document.body.appendChild(script); //将script标签追加到body中此时对地址URL发起请求window[functionName] function(data) { //window.JSONP_80284020025function(){};服务端对window.JSONP_80284020025函数进行调用且传入了服务端的数据$resultData实参callback(data); //data为函数window.JSONP_80284020025的形参同时为回调函数callback的实参// (function(result) {//result为回调函数callback的形参// console.logg(result)// })(data);//data此时作为实参供回调函数处理delete window[functionName]; //当处理完数据后释放内存并删除script标签document.body.removeChild(script);};};// 调用jsonp(http://test/server.php, {id: 123}, function(result) {console.log(result)});/script服务端代码 ?php$data time();// 如果客户端采用的是 script对服务器发送的请求, 一定要返回一段 JavaScript设置Content-Type为application/javascriptheader(Content-Type: application/javascript);$resultData json_encode($data);$callback $_GET[callback];//接收到函数名JSONP_80284020025echo typeof {$callback} function {$callback}({$resultData});//如果JSONP_80284020025为函数类型则调用JSONP_80284020025函数并将请求的数据作为函数参数传给函数处理提示本文图片等素材来源于网络若有侵权请发邮件至邮箱810665436qq.com联系笔者删除。 笔者苦海
