前端知识点总结-Ajax1.ajax1.URL的作用是用来指示任意资源的位置（在互联网上）2.详细格式：：//:@:/;?#scheme:scheme\protocol,从服务获取资源的方式，协议不区分大小写，常用Protocol:http,https,ftpssh:安全远程登录SMTP:邮件传输POP3:邮件接收DNS:域名解析TELNET:远程登录host:主机名，服务器主机名或IP地址或域名（由DNS转换为IP地址）127.0.0.1=localhostport：端口号80443user：用户名，访问某些资源所需的信息pwd：password，访问某些资源所需的密码path：路径，资源在服务器上具体存放位置params：参数（与服务器相关）query：查询字符串，要传递给服务器的数据http://127.0.0.1/login.php?uname=dangdang&upwd=12345frag：锚点http://127.0.0.1/a.html#NO12.HTTP协议1.什么是HTTP超文本传输??协议：超文本传输??协议规定了数据如何打包和传输2.详解1.请求（request）消息TheclientbringdatatotheserverWhich,由三部分组成1.请求的起始行1.请求方式1.GET表示客户端从服务器获取资源时使用的特性：1.没有请求体2.通过地址栏传递查询字符串2.POST表示要向服务器传递数据时使用的特性：1.有一个请求体3.PUT表示客户端要向服务器放文件（禁用）4.DELETE表示客户端要删除服务器上的数据侧面（禁用）5.HEAD表示客户端只想获取指定的响应头6.CONNECT测试连接7.TRACE跟踪请求路径8.OPTIONS选项，留作以后使用2.请求URL3.协议版本：HTTP/1.12.1请求头1.Host:localhost/127.0.0.1功能：告诉浏览器请求哪个主机2.Connection:keep-alive功能：告诉服务器建立持久连接3.User-Agent：功能：告诉服务器你自己的（浏览器）类型4.Accept-Language:zh-cn功能：告诉服务器它可以接受的自然语言5.Accept-Encoding:gzip功能：告诉服务器它可以接收什么类型的数据压缩：告诉服务器请求来自哪个页面3.请求体表单数据2.2响应（response）消息1.响应起始行1.协议版本号：HTTP/1.12.响应状态码作用：告诉浏览器服务器的响应状态是什么问题（问题，没问题，问题\大概是什么问题）1xx：100-199提示信息2xx：成功响应200：ok3xx：需要重定向301：永久重定向302：临时重定向304：未修改4xx：客户端请求error404:NotFound请求的资源不存在403:Forbidden权限不够405:MethodNotAllowed请求方法不允许5xx:服务器操作错误500:服务器内部错误2.3原因短语对状态码的解释很简单2.响应头1.Date函数：告诉浏览器，服务器的响应时间GMT(+8h)2.Connection函数：告诉告诉浏览器持久连接已经启动3.Content-Type作用：响应体的类型是什么，告诉浏览器如何解析响应体1.text/html：响应返回的数据是htmltext2.text/plain：响应数据为纯文本3.text/css：响应数据为css样式4.application/xml：响应数据为xml格式5.application/javascript：响应数据为js脚本代码6.application/json：响应返回的数据是json格式的字符串7.images/jegp：响应返回的数据是图片3.响应体Response3.缓存1.什么是缓存&工作原理的客户端发送服务器返回的数据自动保存，下次访问时直接使用保存的数据2.缓存的优点1.减少冗余数据的传输，节省客户端流量2.可以节省服务器带宽3.减少服务器资源消耗和运行要求4.减少远距离造成的延迟加载3.消息头相关缓存1.Cache-Controlmessageheader作用：从服务器向客户端传输文档的时间，可以认为是文档新鲜的秒数语法：Cache-Control:max-age=秒是新鲜的数字ex:Cache-Control:max-age=3600;缓存控制：最大年龄=0；每次从服务器下载新的资源2.Expires消息头功能：指定缓存过期的准确时间（格林威治标准时间）语法：Expires:Thu,23Nov2017GMT如果想让客户端不缓存，可以给一个过期时间Expires:Wed,22Nov201700:00:00GMTExpires:0;---这个方法不规范，可强制执行不是特别好4.在网页上设置消息头1.更改服务器配置2.向网页添加消息ex:或php:header("Expires:0");Response.AddHeader("过期","0");4.AJAX1。名词解释1.同步（Synchronous）当一个任务正在进行时，其他任务不能开启同步访问：当浏览器向服务器发送请求时，浏览器只能等待服务器的响应。不能做其他事情。发生方式：1.地址栏输入网址访问页面（www.baidu.com）2.a标记默认跳转3.提交按钮表单提交2.异步（Asynchronous）当一个任务正在进行时，其他任务可以启动异步访问：当浏览器向服务器发送请求时，不会延迟用户对网页的其他操作。使用场合：1.用户名重复验证2.聊天室3.股票走势图4.搜索框建议（百度、京东）2.AJAX1.AsynchronousJavascriptAndXml异步js和xml2。本质：利用js提供的异步对象（XMLHttpRequest）向服务器异步发送请求，并接受响应数据（数据格式为Xml）。在AJAX请求中，服务器响应返回的数据是部分数据而不是完整的页面，可以改变页面的部分内容而不刷新效果。3、创建XMLHttpRequest对象——异步对象(xhr)标准创建：varxhr=newXMLHttpRequest();IE8以下：varxhr=newActiveXObject("Microsoft.XMLHttp");允许通过window.XMLHttpRequest创建来判断浏览器是否支持标准，如果浏览器不支持标准创建，那么window.XMLHttpRequest的值为nullif(window.XMLHttpRequest){varxhr=newXMLHttpRequest();}else{varxhr=newActiveXObject("Microsoft.XMLHttp");}4.XHR常用方法及属性（重点）1.open()功能：创建请求语法：xhr.open(method,url,isAsyn);1.method字符串类型请求方法：get/post2.url字符串类型请求地址3.isAsynboolean类型指定是同步发送请求（false）还是异步发送请求（true）2.readyState属性的作用：表示xhr对象的请求状态值：0-4表示5种状态0：请求未初始化1：已打开链接到服务器正在发送请求2：请求完成3.服务器响应isbeingreceived4.响应数据接收成功注意：当readyState的值为4时，表示已经接收到所有的响应。3、status属性作用：表示服务器的响应状态码值：记住一个值：200当status的值为200时，表示服务器正确处理了请求并给出了响应。4、onreadystatechange事件函数：当xhr的readyState属性值发生变化时，自动触发的操作（当xhr对象的状态正在发生变化时，该事件会一直监听）语法：onreadystatechange=function(){//判断xhr的readyState为4，xhr的status值为200，即可获取/响应数据if(xhr.readyState==4&&xhr.status==200){//接收响应结果varresText=xhr.responseText;控制台日志（resText）；}}5.send()函数：发送请求语法：xhr.send(body)body：请求body如果没有请求body，body的位置为null(get)如果有请求body，则Put请求body数据到body位置（post）5.发送异步请求的步骤1.创建xhr对象2.创建请求3.设置xhr的onreadystatechange（回调函数）判断状态，接收响应数据4.发送请求5.使用ajax发送post请求，注意两点：1.post请求将数据放在请求体中xhr.send(body);例如：xhr.send("uname=value1&upwd=value2");2、发送请求前需要手动修改请求消息头xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");6.js对象数据格式1.js对象数据格式varlindaiyu=[];lindaiyu[0]="林黛玉";lindaiyu[1]="1990";lindaiyu[2]="160cm";lindaiyu[3]="50kg";修订:varlindaiyu=[];lindaiyu["name"]="林黛玉";lindaiyu["出生"]="1990";lindaiyu["身高"]="160cm";lindaiyu["体重"]="50kg";ex:值lindaiyu["name"]数组描述了林黛玉的个人信息。如果把林黛玉当成一个物体，那么她的个人信息就是她这个物体的属性。js对象的语法：varObjectname={attribute:value,attribute:value,attribute:value,attribute:value};ex：林黛玉这个对象对应的属性如下varlindaiyu={name:"林黛玉",birth:"1990",height:"160cm",weight:"50kg",}如果对象取值,直接宾语。属性名可以是ex:lindaiyu.name--->林黛玉7.JSON1.什么是JSONJavaScriptObjectNotationjsobjectrepresentationjsobjectNotation，即用js对象的格式表示的字符串。2.JSON语法1.JSON对象1.用一对{}表示一个对象2.对象的属性名必须用""括起来（不能用单引号），如果值为字符串，它也必须是“”引起的。ex:varcomputer='{"name":"computer","price":5600}'2.JSON数组1.普通数组'["小乔","大乔","貂蝉"]'2.ObjectArray'[{"name":"小乔","height":"160cm","age":18},{"name":"大乔","height":"163cm","age":20},{"name":"貂蝉","height":"165cm","age":21}]'3.JSON文件创建一个后缀为.json的文件，里面包含json格式的数据4.将JSON字符串转为js对象/数组varmperson='{"name":"TOM","age":18}';//json对象vararr='["小乔","大乔","貂蝉"]';//json数组vararr1='[{"name":"Lucy","age":19},{"name":"Lily","age":19}]';//json数组如何将上面的数据转为js对象/数组格式1.使用eval()将数据转为js对象数组（不推荐）2.使用JSON.parse()解析JSON字符串作为js对象varobj=JSON.parse(mperson);//js对象varobj=JSON.parse(arr);//js数组varobj=JSON.parse(arr1);//js数组2.JS对象数据格式varobjectname={attribute:value,attribute:value,属性：值}值：对象名称。属性3.JSON数据格式varperson='{"name":"TOM","age":12}'4.将JSON格式的数据转换为js对象/数组1.eval()2.JSON.parse4.1PHP中可以直接将数组转成JSON格式的字符串语法：通过json_encode()字符串将数组转成JSON字符，并返回返回转换后的结果ex:Inphp$array=["Dingding","Dangdang","Bingbing"];$str=json_encode($数组);8.XMLAJAX:AsynchronousJavascriptAndXml1.什么是XMLeXtensibleMarkupLanguage可扩展标记语言XML标记没有预先定义，需要自定义XML的目的是为了数据传输，而不是显示数据2.XML语法结构XML可以独立保存为***.xml文件，也可以以字符串的形式出现1.XML最上面是XML的声明2.语法XML标签的使用1.XML标签必须成对出现错误2.XML严格区分大小写，开始和结束必须一致正确的错误3.XML标签允许嵌套，注意嵌套顺序4.每个标签允许自定义属性，格式与html一致，但属性值必须用""括起来5.每个XML文档必须有一个根元素3.解析XML文档对象的内容1.核心方法elem.getElementsByTagName("标签名");返回值：返回一个包含指定元素的“类数组”（for循环遍历）ex:varxmlDoc=xhr.responseXML;xmlDoc.getElementsByTagName("学生");4.在PHP中返回一个XML格式的字符串1.必须在响应头中加上header("Content-Type:application/xml");2.根据XML的语法结构，拼装xml字符串，然后响应给前端$xml="";$xml.="";...$xml.="";echo$xml;
