企业官网建设流程全解析

企业网站管理系统演示平台,设计画册,贵阳微信网站制作,郑州制作网站费用Ajax - 前后端的交互技术 服务器的概念 前言#xff1a;通俗的讲#xff0c;能够提供某种服务的机器#xff08;计算机#xff09;称为服务器 服务器软件 使计算机具备提供某种服务能力的应用软件#xff0c;称为服务器软件#xff0c; 通过安装相应的服务软件#xff…Ajax - 前后端的交互技术服务器的概念前言通俗的讲能够提供某种服务的机器计算机称为服务器服务器软件使计算机具备提供某种服务能力的应用软件称为服务器软件 通过安装相应的服务软件然后进行配置后就可以使计算具备了提供某种服务的能力。常见的服务器软件Apache服务器、Nginx 服务器、IIS服务器、Tomcat服务器、 Node服务器等web服务器即(web服务器)网站服务器主要提供文档(文本、图片、视频、音频)浏览服务一般安装Apache、Nginx服务器软件。服务器可以结合某一编程语言处理业务逻辑由此进行的开发通常称之为服务端开发。常见后台开发的编程语言有php、java、.net、Python、Ruby、Perl。客户端具有向服务器索取服务能力的终端叫做客户端。客户端电脑、平板、手机安装了客户端软件就可以称为客户端客户端安装客户端软件索取服务的计算机服务器安装服务器软件提供服务的计算机客户端软件对于前端工程师而言主要接触到的客户端软件就是浏览器。以浏览器为宿主环境结合 HTML、CSS、Javascript等技术而进行的一系列开发通常称之为前端开发。服务器与客户端的关系问题我们写的html页面存放在哪里在浏览器中展示的所有的资源 都是存放在服务器中的 当客户端向服务器发送请求后服务器会将资源返回给浏览器进行渲染动态网页与静态网页静态网页使用浏览器端语言进行编程网站由静态代码HTML.CSS,JS组成。用户请求服务器上已经存在的页面不需要进行业务逻辑的处理。动态网站 网页通过服务器的程序动态生成。用户可以和服务器进行交互可以根据用户输入的不同信息返回不同的运行结果可以处理复杂的业务逻辑。总结动态网站的 动指的是网站数据的动 而不是 视觉上的动;网络基础//思考我的电脑如何去 访问京东淘宝网页的ip地址所谓IP地址就是给每个连接在互联网上的主机分配的一个32位地址。(就像每个人的身份证号码一样)通过ip就可以找到具体的某一台计算机。例192.168.1.110弊端没有规律不方便记忆和推广查看本机IP地址ping、ipconfigping 192.168.1.110 // 查看和某个同学的电脑是否连通两种特殊的IP地址127.0.0.1作为本地测试的IP地址。本机测试时客户端与服务器都安装在本地计算机上数据无需任何网络传输。192.168开头为局域网的地址。域名由于IP地址基于数字不方便记忆于是便用域名来代替IP地址域名是一个IP地址的“好记的名字”查看域名对应的IP地址pingping jd.com //可以获取到京东的ip特殊的域名localhost意思为本地主机。这是一个保留域名主要用于本地测试对应IP地址为127.0.0.1。DNS服务器DNSDomain Name System因特网上作为域名和IP地址相互映射的一个分布式数据库 能够使用户更方便的访问互联网而不用去记住能够被机器直接读取的IP数串。简单的说就是用于记录IP地址和域名之间的对应关系。查找优先级 本机hosts文件、DNS服务器ipconfig /flushdns 刷新DNS问题 在浏览器输入www.jd.com 到 浏览器返回html页面的执行过程是什么样的端口端口号是计算机与外界通讯交流的出入口每个端口对应不同的服务。现实生活中银行不同的窗口办理不同的业务。查看端口占用情况 netstat -an常见端口号 80、3306、21本地hostsHosts是一个没有扩展名的系统文件可以用记事本等工具打开其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”当用户在浏览器中输入一个需要登录的网址时系统会首先自动从Hosts文件中寻找对应的IP地址一旦找到系统会立即打开对应网页如果没有找到则系统会再将网址提交DNS域名解析服务器进行IP地址的解析。//hosts文件的地址C:\Windows\System32\drivers\etc //在浏览器中输入taobao.com的执行过程。//hosts文件内容 127.0.0.1 localhost 127.0.0.1 localhost 127.0.0.1 study.com 127.0.0.1 www.study.com搭建HTTP服务器phpStudy介绍phpStudy是一个PHP调试环境的程序集成包。 该程序包集成最新的ApachePHPMySQL,安装非常的简单phpStudy的安装安装phpStudy解压双击安装(非中文路径)其它默认安装。推荐就安装在默认的目录下一定不能有中文否则肯定启动不起来。;phpStudy的错误解决如果phpStudy启动发生错误参数下列几点。一是防火墙拦截二是 80端口已经被别的程序占用如IIS迅雷等三是没有安装VC9运行库,php和apache都是VC9编译。解决以上三个问题99%能一次性安装成功为了减少出错安装路径不得有汉字如有防火墙开启会提示是否信任httpd、mysqld运行请选择全部允许。关闭IIS服务器如果发现服务器启动不成功很大原因是端口被占用了因为windows默认会有一个iis服务器只需要把iis服务器给禁用了即可。//控制面板--程序--程序与功能--启用或关闭windows功能提示缺少vc9 库文件在提供的资料库中找到phpStudy运行库 根据自己电脑操作系统的位数安装对应的vc9运行库即可。关闭防火墙如果希望系统自己的服务器能够被别人访问。需要关闭防火墙。//控制面板---系统和安全---Windows 防火墙---启动或者关闭windows防火墙PHP基础PHP简介开源open source软件跨平台常用操作系统稳定执行。Windows / Linux。做WEB开发的经典组合 WAMP,LAMP基本都是开源软件入门简单,用户只需要关注应用开发成本低支持的大多数主流数据库。MySQLoracle,Redis等 ​文件以.php后缀结尾所有程序包含在?php 这里写代码 ?避免使用中文目录和中文文件名php页面无法直接打开需要运行在服务器环境当中注意学习php的目的是为了更好的学习前端技能因为需要了解一些后台的知识千万不要本末倒置我们的课程重心在前端。php初体验?php //echo 相当于document.write echo hello world; ?输入中文乱码问题如果使用echo输出中文会乱码。在php的语法中末尾必须加分号不然就报错了最后一行可以不加分号?php //content-Type:text/html;返回内容是一个HTML文档这样设置后就能识别HTML标签了。 //charsetutf-8 设置编码集 header(content-Type:text/html;charsetutf-8); echo hello world; echo br/; echo 大家好我是春哥; ?//思考浏览器访问php文件时过程是怎么样的变量php是一门弱类型语法变量的类型可以随意改变。 变量其实就是存储数据的容器变量的命名规则//1. 不需要关键字进行声明变量在第一次赋值的时候被创建。 //2. 必须以$符号开始 //3. $后面的命名规则与js的变量命名规则一致。 $name 春哥; echo $name;数据类型简单数据类型字符串$str 春哥; echo $str;整数$num 100; echo $num;浮点型$float 11.11; echo $float;布尔类型$flag true; //当布尔类型值为true时输出1 echo $flag; $flag false; //当布尔类型为false时输出空字符串 echo $flag;字符串连接符//1. 在php中号只有算数的功能并不能拼串 //2. 在php中拼串使用. $name 春哥; echo 大家好我是 . $name . 今年18岁;php中的单引号与双引号//1. 字符串的定义可以使用单引号也可以使用双引号 $name 春哥; $desc 很帅; //2. 双引号可以解析变量 //3. 单引号的性能会高于双引号了解 $name 春哥;//春哥 echo $name; $desc 很帅; echo $desc;//很帅 $str $name 很帅;//$name 很帅 echo $str; $str $name 很帅;//春哥 很帅 echo $str;数组在php中数组分为两种索引数组和关联数组计算数组长度的方法 count(数组名);索引数组类似与JS中的数组$arr array(张飞,赵云,马超); echo $arr;//echo只能打印基本数据类型 echo $arr[0];//张飞关联数组类似与JS中的对象//属性名必须用引号引起来 $arr array(namezhangsan, age18); echo $arr[name];输出语句//1. echo 输出简单数据类型 //2. print_r 输出数据结构一般用于输出复杂类型。 print_r($arr);//print_r是一个函数不要忘记小括号语句判断语句基本上来说所有语言的if..else语法都是一样$age 17; if ($age 18) { echo 终于可以看电影了,嘿嘿嘿; } else { echo 哎还是回家学习吧; }循环语句遍历索引数组$arr array(张三, 李四, 王五, 赵六, 田七, 王八); //获取数组的长度 count($arr) for($i 0; $i count($arr); $i) { echo $arr[$i]; echo br; }遍历关联数组//遍历关联数组 $arr array( namezs, age18, sex20 ); foreach($arr as $key $value) { echo $key . . $value . br; }表单提交表单form表单用于收集用户输入信息并将数据提交给服务器。是一种常见的与服务端数据交互的一种方式//1. action指定表单的提交地址 //2. method:指定表单的提交方式get/post默认get //3. input的数据想要提交到后台必须指定name属性后台通过name属性获取值 //4. 想要提交表单不能使用input:button 必须使用input:submitphp获取表单数据//$_GET是PHP系统提供的一个超全局变量是一个数组里面存放了表单通过get方式提交的数据。 //$_POST是PHP系统提供的一个超全局变量是一个数组里面存放了表单通过post方式提交的数据。get与post的区别//1. get方式 //1.1 数据会拼接在url地址的后面?usernamehccpassword123456 //1.2 地址栏有长度限制因此get方式提交数据大小不会超过4k //2. post方式 //2.1 数据不会在url中显示相比get方式post更安全 //2.2 提交的数据没有大小限制 //根据HTTP规范GET用于信息获取POST表示可能修改变服务器上的资源的请求http协议协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则 HTTP协议即超文本传输协议(Hypertext transfer protocol)。是一种详细规定了浏览器和服务器之间互相通信的规则HTTP协议分为请求和响应两个部分组成。请求与请求报文get请求的请求报文详解//--------------------------请求行-------------------------------- // GET 请求方式 // /day02/01.php?usernamehuccpassword123456 请求路径参数注意点 // HTTP/1.1 HTTP的版本号 GET /day02/01.php?usernamehuccpassword123456 HTTP/1.1 //--------------------------请求头-------------------------------- // Host:主机地址 Host: www.study.com // HTTP1.1版本默认开启建立过连接后TCP连接不会断开下次连接可以继续使用底层不用管 Connection: keep-alive //chrome浏览器自己增加的不用管 Upgrade-Insecure-Requests: 1 //浏览器的代理字符串版本信息 User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36 //浏览器端可以接受的类型。 Accept: text/html,application/xhtmlxml,application/xml;q0.9,image/webp,*/*;q0.8 //从哪个页面发出的请求 Referer: http://www.study.com/day02/01-login.html //检查浏览器支持的压缩方式 Accept-Encoding: gzip, deflate, sdch //浏览器支持的语言优先中文。 Accept-Language: zh-CN,zh;q0.8,en;q0.6 //----------------------------请求体------------------------------------- //get请求没有请求体但是参数会拼接到请求行中POST请求的请求报文//-----------------------请求行--------------------------------------------- POST /day02/01.php HTTP/1.1 //-----------------------请求头-------------------------------------------- Host: www.study.com Connection: keep-alive //传递的参数的长度。 Content-Length: 29 Cache-Control: max-age0 Origin: http://www.study.com Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36 //内容类型表单数据如果是post请求必须指定这个属性。 Content-Type: application/x-www-form-urlencoded Accept: text/html,application/xhtmlxml,application/xml;q0.9,image/webp,*/*;q0.8 Referer: http://www.study.com/day02/01-login.html Accept-Encoding: gzip, deflate Accept-Language: zh-CN,zh;q0.8,en;q0.6 //------------------------请求体------------------------------------------ usernamehuccpassword123456GET请求与POST请求的对比GET请求没有请求体因为GET请求的参数拼接到地址栏中了POST请求有请求体就是传递的参数POST请求需要指定content-type属性。响应与响应报文//---------------------状态行响应行------------------------------- //HTTP/1.1 HTTP版本 //200 响应的状态 //200表示成功 //304表示读缓存 //404表示找不到资源 //500表示服务端错误 HTTP/1.1 200 OK //----------------------响应头----------------------------------------------- Date: Thu, 22 Jun 2017 16:51:22 GMT Server: Apache/2.4.23 (Win32) OpenSSL/1.0.2j PHP/5.4.45 X-Powered-By: PHP/5.4.45 Content-Length: 18 Keep-Alive: timeout5, max100 Connection: Keep-Alive //内容类型告诉浏览器该如何解析响应结果 Content-Type: text/html;charsetutf-8 //-----------------------响应体------------------------------------------------ 用户登录成功通常来说我们不会用抓包工具来查看请求和响应太麻烦了可以直接使用谷歌浏览器来查看请求报文和响应报文。谷歌浏览器会对报文进行一定的格式化看起来虽然不是原生的报文但是使用起来更加的方便简洁。AJAX即 Asynchronous [esɪŋkrənəs] Javascript And XML AJAX 不是一门的新的语言而是对现有技术的综合利用。 本质是在HTTP协议的基础上以异步的方式与服务器进行通信。同步与异步同步和异步概念同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务异步: 不受当前任务的影响两件事情同时进行做一件事情时不影响另一件事情的进行。编程中异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。ajax技术的应用验证你的用户名是否已经存在一边输入一边获取你的信息和后台比对。百度搜索提示及相关内容展示一边输入一边找出了你可能要的内容。XMLHttpRequest可以以异步方式的处理程序。XMLHttpRequest浏览器内建对象用于与服务器通信(交换数据) 由此我们便可实现对网页的部分更新而不是刷新整个页面。这个请求是异步即在往服务器发送请求时并不会阻碍程序的运行浏览器会继续渲染后续的结构。发送get请求XMLHttpRequest以异步的方式发送HTTP请求因此在发送请求时一样需要遵循HTTP协议。//使用XMLHttpRequest发送get请求的步骤 //1. 创建一个XMLHttpRequest对象 var xhr new XMLHttpRequest;//构造函数没有参数的情况,括号可以省略 //2. 设置请求行 //第一个参数:请求方式 get/post //第二个参数:请求的地址 需要在url后面拼上参数列表 xhr.open(get, 08.php?namehucc); //3. 设置请求头 //浏览器会给我们默认添加基本的请求头,get请求时无需设置 //4. 设置请求体 //get请求的请求体为空,因为参数列表拼接到url后面了 xhr.send(null);get请求,设置请求行时,需要把参数列表拼接到url后面get请求不用设置请求头get请求的请求体为null发送post请求var xhr new XMLHttpRequest; //1. 设置请求行 post请求的参数列表在请求体中 xhr.open(post, 09.php); //2. 设置请求头, post请求必须设置content-type,不然后端无法获取到数据 xhr.setRequestHeader(content-type, application/x-www-form-urlencoded); //3. 设置请求体 xhr.send(namehuccage18);post请求,设置请求行时,参数列表不能拼接到url后面post必须设置请求头中的content-type为application/x-www-form-urlencodedpost请求需要将参数列表设置到请求体中.获取响应HTTP响应分为3个部分状态行、响应头、响应体。//给xhr注册一个onload事件当xhr的状态发生状态发生改变时会触发这个事件。 xhr.onload function () { //1. 获取状态行 console.log(状态行:xhr.status); //2. 获取响应头 console.log(所有的相应头:xhr.getAllResponseHeaders()); console.log(指定相应头:xhr.getResponseHeader(content-type)); //3. 获取响应体 console.log(xhr.responseText); }readyStatereadyState:记录了XMLHttpRequest对象的当前状态//0请求未初始化。 //1请求已经建立但是还没有开始发送。 //2请求已发送正在处理中 //3请求在处理中通常响应中已有部分数据可用了但是服务器还没有完成响应的生成。 //4响应已完成您可以获取并使用服务器的响应了。(我们只需要关注状态4即可)数据交互浏览器端只是负责用户的交互和数据的收集以及展示真正的数据都是存储在服务器端的。我们现在通过ajax的确可以返回一些简单的数据一个字符串但是在实际开发过程中肯定会会设计到大量的复杂类型的数据传输比如数组、对象等但是每个编程语言的语法都不一样。因此我们会采用通过的数据交换格式XML、JSON来进行数据的交互。XML什么是XMLXML 指可扩展标记语言EXtensible Markup LanguageXML 是一种标记语言很类似 HTMLXML 的设计宗旨是传输数据而非显示数据XML 标签没有被预定义。您需要自行定义标签。语法规范第一行必须是版本信息必须有一个根元素有且仅有一个标签不可有空格、不可以数字或.开头、大小写敏感不可交叉嵌套都是双标签如果是单标签必须闭合属性双引号浏览器自动修正成双引号了特殊符号要使用实体注释和HTML一样students student name张三/name age18/age gender男/gender desc路人甲/desc /student student name李四/name age20/age gender男/gender desc路人乙/desc /student /studentsphp获取xml文件的内容//注意如果需要返回xml数据需要把content-type改成text/xml,不然浏览器以text/html进行解析。 header(content-type:text/xml;charsetutf-8); //用于获取文件的内容 //参数文件的路径 $result file_get_contents(data.xml); echo $result;html解析xml//获取服务端返回的xml数据需要使用xhr.responseXML这是一个document对象可以使用DOM中的方法查找元素。 var data xhr.responseXML; //获取所有的学生 var students data.querySelectorAll(student);缺点虽然可以描述和传输复杂数据但是其解析过于复杂并且体积较大所以实现开发已经很少使用了。JSON数据JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript 规范的一个子集采用完全独立于编程语言的文本格式来存储和表示数据。数据在名称/值对中数据由逗号分隔(最后一个健/值对不能带逗号)花括号保存对象方括号保存数组键使用双引号var obj {a: Hello, b: World}; //这是一个对象注意键名也是可以使用引号包裹的 var json {a: Hello, b: World}; //这是一个 JSON 字符串本质是一个字符串JSON数据在不同语言进行传输时类型为字符串不同的语言各自也都对应有解析方法需要解析完成后才能读取php处理jsonphp关联数组 json// php的关联数组 $obj array( ahello, bworld, name胡聪聪 ); //json字符串 $json json_encode($obj); echo $json;jsonphp对象$json {a: Hello, b: World};//json字符串 //第一个参数json字符串 //第二个参数 //false将json转换成对象(默认) //true将对象转换成数组(推荐) $obj json_decode($json,true); echo $obj[a]; //通过json文件获取到的内容就是一个json字符串。 $data file_get_contents(data.json); //将json转换成数组 $result json_decode($data, true); print_r($result);JS处理jsonJS对象 JSON字符串 JSON.stringify(obj)//obj是一个js对象 var obj {a: Hello, b: World} //result就变成了一个json字符串了 var result JSON.stringify(obj);// {a: Hello, b: World}JSON字符串 JS对象 JSON.parse(obj)//json是一个json字符串 var json {a: Hello, b: World}; //obj就变成了一个js对象 var obj JSON.parse(json);// {a: Hello, b: World}使用json进行数据传输思考js有一个对象如何发送到php后台php中有一个对象如何发送到前台。【案例获取表格数据.html】兼容性处理var xhr null; if(XMLHttpRequest){ //现代浏览器 xhr new XMLHttpRequest(); }else{ //IE5.5支持 xmlHttpnew ActiveXObject(Microsoft.XMLHTTP); }前后端分离我们使用php动态渲染页面时有很多比较麻烦的地方。在前端写好页面以后需要后台进行修改意味这后端程序员也需要懂前端的知识其实渲染的工作应该交给前端来做。前端没有写好页面的话后端无法开始工作需要等待前端的页面完成之后才能开始工作拖延项目 的进度。在客户端设备多元化的情况下后台渲染的页面无法满足所有用户的需求前后端代码混合在一个文件中项目修改和维护成本高​jQuery中的ajax方法jQuery为我们提供了更强大的Ajax封装$.ajax参数列表参数名称描述取值示例url接口地址url:02.phptype请求方式get/posttype:gettimeout超时时间单位毫秒timeout:5000dataType服务器返回的格式json/xml/text(默认)dataType:jsondata发送的请求数据对象data:{name:zs, age:18}beforeSend调用前的回调函数function(){}beforeSend:function(){ alert(1) }success成功的回调函数function (data) {}success:function (data) {}error失败的回调函数function (error) {}error:function(data) {}complete完成后的回调函数function () {}complete:function () {}使用示例$.ajax({ type:get,//请求类型 url:02.php,//请求地址 data:{name:zs, age:18},//请求数据 dataType:json,//希望接受的数据类型 timeout:5000,//设置超时时间 beforeSend:function () { //alert(发送前调用); }, success:function (data) { //alert(成功时调用); console.log(data); }, error:function (error) { //alert(失败时调用); console.log(error); }, complete:function () { //alert(请求完成时调用); } });【案例登录案例.html】其他api(了解)//$.post(url, callback, [dataType]);只发送post请求 //$.get(url, callback, [dataType]); //$.getJSON(url, callback); //$.getScript(url,callback);//载入服务器端的js文件 //$(div).load(url);//载入一个服务器端的html页面。接口化开发请求地址即所谓的接口通常我们所说的接口化开发其实是指一个接口对应一个功能 并且严格约束了请求参数和响应结果的格式这样前后端在开发过程中可以减少不必要的讨论 从而并行开发可以极大的提升开发效率另外一个好处当网站进行改版后服务端接口进行调整时并不影响到前端的功能。注册接口表单序列化jquery提供了一个serialize()方法序列化表单说白就是将表单中带有name属性的所有参数拼成一个格式为namevaluename1value1这样的字符串。方便我们获取表单的数据。//serialize将表单参数序列化成一个字符串。必须指定name属性 //namehuccpass123456repass123456mobile18511249258code1234 $(form).serialize();jquery的ajax方法data参数能够直接识别表单序列化的数据data:$(form).serialize()$.post({ url:register.php, data:$(form).serialize(), dataType:json, success:function (info) { console.log(info); } });需求文档//注册功能 //总需求点击注册按钮向服务端发送请求 //需求1:表单校验 //1.1 用户名不能为空否则提示请输入用户名 //1.2 密码不能为空否则提示请输入密码 //1.3 确认密码必须与密码一直否则提示确认密码与密码不一致 //1.4 手机号码不能为空否则提示请输入手机号码; //1.5 手机号码格式必须正确否则提示手机号格式错误 //1.6 短信验证码必须是4位的数字否则提示验证码格式错误 //需求2点击注册按钮时按钮显示为注册中...,并且不能重复提交请求 //需求3根据不同响应结果处理响应 //3.1显示注册结果模板引擎是为了使用户界面与业务数据内容分离而产生的它可以生成特定格式的文档用于网站的模板引擎就会生成一个标准的HTML文档。为什么要使用模板引擎我们通过ajax获取到数据后需要把数据渲染到页面在学习模板引擎前我们的做法是大量的拼接字符串对于结构简单的页面这么做还行但是如果页面结构很复杂使用拼串的话代码可阅读性非常的差而且非常容易出错后期代码维护也是相当的麻烦。【演示使用拼串进行渲染的缺点.html】作用代替前面渲染数据是拼接字符串操作实际工作渲染数据使用的模板引擎常见的模板引擎BaiduTemplatehttp://tangram.baidu.com/BaiduTemplate/ velocity.jshttps://github.com/shepherdwind/velocity.js/ ArtTemplatehttps://github.com/aui/artTemplateartTemplate是使用最广泛效率最高的模板引擎需要大家掌握。artTemplate的使用github地址中文api地址artTemplate入门1.引入模板引擎的js文件script srctemplate-web.js/script2.准备模板!-- 指定了type为text/template后这一段script标签并不会解析也不会显示。 -- script typetext/template idtmp p姓名{{ username }}/p p年龄{{ age }}/p p技能{{ skill }}/p p描述{{desc }}/p /script3.准备数据//3. 准备数据,数据是后台获取的可以随时变化 var json { userName:隔壁老王, age:18, skill:查水表, desc:年轻气壮 }4.将模板与数据进行绑定//第一个参数模板的id //第二个参数数据 //返回值根据模板生成的字符串。 var html template(myTmp, json); console.log(html);5.将数据显示到页面var div document.querySelector(div); div.innerHTML html;注意传递给模板引擎的数据必须是对象artTemplate语法if语法{{if gender男}} div classman {{else}} div classwoman {{/if}}each语法!-- 1. {{each data}} 可以通过$value 和 $index获取值和下标 2. {{each data v i}} 自己指定值为v下标为i -- {{each data v i}} li a href{{v.url}} img src{{v.src}} alt p{{v.content}}/p /a /li {{/each}}//如果返回的数据是个数组必须使用对象进行包裹因为在{{}}中只写书写对象的属性。 var html template(navTmp, {data:info});同源与跨域同源不同源 则跨域同源策略的基本概念1995年同源政策由 Netscape 公司引入浏览器。目前所有浏览器都实行这个政策。 同源策略最初它的含义是指A网页设置的 CookieB网页不能打开除非这两个网页同源。现在浏览器的所谓同源指的是三个相同:协议相同 域名相同 端口相同举例来说http://www.example.com/dir/page.html这个网址协议是http://域名是www.example.com端口是80默认端口可以省略。它的同源情况如下。//http://www.example.com/dir2/other.html同源 //http://example.com/dir/other.html不同源域名不同 //http://v2.www.example.com/dir/other.html不同源域名不同 //http://www.example.com:81/dir/other.html不同源端口不同同源策略的目的同源政策的目的是为了保证用户信息的安全防止恶意的网站窃取数据。同源策略的限制范围随着互联网的发展“同源策略”越来越严格目前如果非同源以下三种行为都将收到限制。//1. Cookie、LocalStorage 无法读取。 //2. DOM 无法获得。 //3. AJAX 请求不能发送。虽然这些限制是很有必要的但是也给我们日常开发带来不好的影响。比如实际开发过程中往往都会把服务器端架设到一台甚至是一个集群的服务器中把客户端页面放到另外一个单独的服务器。那么这时候就会出现不同源的情况如果我们知道两个网站都是安全的话我们是希望两个不同源的网站之间可以相互请求数据的。这就需要使用到跨域。跨域【演示跨域问题.html】jsonpJSONP(JSON with Padding)、可用于解决主流浏览器的跨域数据访问的问题。原理服务端返回一个预先定义好的javascript函数的调用并且将服务器的数据以该函数参数的形式传递过来这个方法需要前后端配合。script标签是不受同源策略的限制的它可以载入任意地方的 JavaScript 文件而并不要求同源。类似的还有img和link标签!--不受同源策略的标签-- img srchttp://www.api.com/1.jpg alt link relstylesheet hrefhttp://www.api.com/1.css script srchttp://www.api.com/1.js/scriptjsonp演化过程jsonp原理大家知道即可不用太过于去纠结这个原理因此jquery已经帮我们封装好了我们使用起来非常的方便。jquery对于jsonp的封装//使用起来相当的简单跟普通的get请求没有任何的区别只需要把dataType固定成jsonp即可。 $.ajax({ type:get, url:http://www.api.com/testjs.php, dataType:jsonp, data:{ uname:hucc, upass:123456 }, success:function (info) { console.log(info); } });【案例查询天气.html】http://lbsyun.baidu.com/index.php?titlecar/api/weather天气查询api地址秘钥zVo5SStav7IUiVON0kuCogecm87lonOj图灵机器人http://www.tuling123.com/XMLHttpRequest 2.0XMLHttpRequest是一个javascript内置对象使得Javascript可以进行异步的HTTP通信。2008年2月就提出了XMLHttpRequest Level 2 草案。老版本的XMLHttpRequest的缺点//1. 仅支持传输文本数据无法传说二进制文件比如图片视频等。 //2. 传输数据时没有进度信息只能提示完成与否。 //3. 受到了同源策略的限制新版本的功能//1. 可以设置timeout 超时时间 //2. 可以使用formData对象管理表单数据 //3. 可以获取数据传输的进度信息注意我们现在使用new XMLHttpRequest创建的对象就是2.0对象了我们之前学的是1.0的语法现在学习一些2.0的新特性即可。timeout设置超时xhr.timeout 3000;//设置超时时间 xhr.ontimeout function(){ alert(请求超时); }formData管理表单数据formData对象类似于jquery的serialize方法用于管理表单数据//使用特点 //1. 实例化一个formData对象 new formData(form); form就是表单元素 //4. formData对象可以直接作为 xhr.send(formData)的参数。注意此时数据是以二进制的形式进行传输。 //5. formData有一个append方法可以添加参数。formData.append(id, 1111); //6. 这种方式只能以post形式传递不需要设置请求头浏览器会自动为我们设置一个合适的请求头。代码示例//1. 使用formData必须发送post请求 xhr.open(post, 02-formData.php); //2. 获取表单元素 var form document.querySelector(#myForm); //3. 创建form对象可以直接作为send的参数。 var formData new FormData(form); //4. formData可以使用append方法添加参数 formData.append(id, 1111); //5. 发送不需要指定请求头浏览器会自动选择合适的请求头 xhr.send(formData);文件上传以前文件上传需要借助表单进行上传但是表单上传是同步的也就是说文件上传时页面需要提交和刷新用户体验不友好xhr2.0中的formData对象支持文件的异步上传。var formData new FormData(); //获取上传的文件传递到后端 var file document.getElementById(file).files[0]; formData.append(file, file); xhr.send(formData);显示文件进度信息xhr2.0还支持获取上传文件的进度信息因此我们可以根据进度信息可以实时的显示文件的上传进度。1. 需要注册 xhr.upload.onprogress function(e){} 事件用于监听文件上传的进度.注意需要在send之前注册。 2. 上传的进度信息会存储事件对象e中 3. e.loaded表示已上传的大小 e.total表示整个文件的大小代码参考xhr.upload.onprogress function (e) { inner.style.width (e.loaded/e.total*100).toFixed(2)%; span.innerHTML (e.loaded/e.total*100).toFixed(2)%; } xhr.send(formData);如果上传文件超过8Mphp会报错需要进行设置允许php上传大文件。跨域资源共享(CORS)cors的使用新版本的XMLHttpRequest对象可以向不同域名的服务器发出HTTP请求。这叫做跨域资源共享Cross-origin resource sharing简称CORS。跨域资源共享CORS的前提浏览器支持这个功能服务器必须允许这种跨域。服务器允许跨域的代码//允许所有的域名访问这个接口 header(Access-Control-Allow-Origin:*); //允许www.study.com这个域名访问这个接口 header(Access-Control-Allow-Origin:http://www.study.com);CORS的具体流程了解浏览器会根据同源策略查看是否是跨域请求如果同源直接发送ajax请求。如果非同源说明是跨域请求浏览器会自动发送一条请求预检请求并不会携带数据服务器接受到请求之后会返回请求头信息浏览器查看返回的响应头信息中是否设置了header(Access-Control-Allow-Origin:请求源域名或者*);如果没有设置说明服务器不允许使用cors跨域那么浏览器不会发送真正的ajax请求。如果返回的响应头中设置了header(Access-Control-Allow-Origin:请求源域名或者*);,浏览器会跟请求头中的Origin: http://www.study.com进行对比如果满足要求则发送真正的ajax请求否则不发送。结论跨域行为是浏览器行为是浏览器阻止了ajax行为。服务器与服务器之间是不存在跨域的问题的【案例图灵机器人】