前端知识点总结——Ajax
1.ajax
1.URL的作用 用于表示任意一个资源的位置(互联网上) 2.详解 格式::// : @ : / ; ? # scheme:方案\协议,以哪种方式到服务获取资源,协议不区分大小写, 常见的协议:http,https,ftp ssh:安全的远程登录 SMTP:邮件传输 POP3:邮件接收 DNS:域名解析 TELNET:远程登录 host:主机名,服务器主机名或IP地址或域名(由DNS转换为IP地址) 127.0.0.1=localhost port:端口号 80 443 user:用户名,访问某些特定资源时需要用到的信息 pwd:密码,访问某些特定资源时需要用到的密码 path:路径,资源在服务器上具体存放位置 params:参数(跟服务器有关) query:查询字符串,要传递给服务器的数据 http://127.0.0.1/login.php?uname=dangdang&upwd=12345 frag:锚点 http://127.0.0.1/a.html#NO1
2.HTTP协议
1.什么是HTTP Hyper Text Transfer Protocol:超文本传输协议 规范了数据如何打包以及传递 2.详解 1.请求(request)消息 客户端带给服务器的数据都有哪些,由三部分组成 1.请求的起始行 1.请求方法 1.GET 表示客户端向服务器获取资源时使用 特点: 1.无请求主体 2.靠地址栏传递查询字符串 2.POST 表示想传递数据给服务器时使用 特点: 1.有请求主体 3.PUT 表示客户端想放置文件到服务器(禁用) 4.DELETE 表示客户端要删除服务器端的数据(禁用) 5.HEAD 表示客户端只想获取指定的响应头 6.CONNECT 测试连接 7.TRACE 追踪请求路径 8.OPTIONS 选项,保留以后使用 2.请求URL 3.协议版本:HTTP/1.1
2.1请求头
1.Host:localhost/127.0.0.1 作用:告诉浏览器请求哪一个主机 2.Connection:keep-alive 作用:告诉服务器要进行持久连接 3.User-Agent: 作用:告诉服务器自己(浏览器)的类型 4.Accept-Language:zh-cn 作用:告诉服务器自己能接纳的自然语言 5.Accept-Encoding:gzip 作用:告诉服务器自己能接收的数据压缩类型是什么 6.Referer:http:localhost/Day01/login.html 作用:告诉服务器请求来自哪个页面 3.请求主体 Form Data
2.2响应(response)消息
1.响应起始行 1.协议版本号:HTTP/1.1 2.响应状态码 作用:告诉浏览器,服务器的响应状态是什么问题(有问题,没有问题,有问题\问题大概是什么) 1xx:100-199 提示信息 2xx:成功响应 200:ok 3xx:需要进行重定向 301:永久性重定向 302:临时重定向 304:Not Modified 4xx:客户端请求错误 404:Not Found 请求资源不存在 403:Forbidden 权限不够 405:Method Not Allowed 请求方法不被允许 5xx:服务器运行错误 500:服务器内部错误
2.3原因短句
对状态码的简单解释 2.响应头 1.Date 作用:告诉浏览器,服务器的响应时间 格林尼治时间(+8h) 2.Connection 作用:告诉浏览器已经启动持久连接 3.Content-Type 作用:响应主体的类型是什么,告诉浏览器,用什么样的方式解析响应主体 1.text/html:响应回来的数据是html文本 2.text/plain:响应回来的数据是普通文本 3.text/css:响应回来的数据是css样式 4.application/xml:响应回来的数据是xml格式 5.application/javascript:响应回来的数据是js脚本代码 6.application/json:响应回来的数据是json格式的字符串 7.images/jegp:响应回来的数据是图片 3.响应主体 Response
3.缓存
1.什么是缓存 & 工作原理
客户端将服务器响应回来的数据进行自动保存,当再次访问时,直接使用保存的数据。 2.缓存的优点 1.减少了冗余数据的传输,节省客户端流量 2.可以节省服务器带宽 3.降低对服务器资源的消耗和运行要求 4.降低了由于远距离而造成的延时加载 3.与缓存相关的消息头 1.Cache-Control消息头 作用:从服务器将文档传到客户端时起,可以认为此文档处于新鲜的秒数 语法: Cache-Control:max-age=处于新鲜的秒数 ex: Cache-Control:max-age=3600; Cache-Control:max-age=0;每次都从服务器下载新资源 2.Expires消息头 作用:指定缓存过期的确切时间(格林尼治时间) 语法:Expires:Thu,23 Nov 2017 GMT 如果希望客户端不缓存,可以给一个过期的时间 Expires:Wed,22 Nov 2017 00:00:00 GMT Expires:0;---此方法不标准,执行性不是特别好 4.在网页上设置消息头 1.更改服务器配置 2.网页上增加消息 ex: 或 php: header("Expires:0"); Response.AddHeader("Expires","0");
4.AJAX
1.名词解释
1.同步(Synchronous) 在一个任务进行中时,不能开启其它的任务 同步访问:浏览器在向服务器发送请求的时候,浏览器只能等待服务器的响应,不能做其它的事情。 出现场合: 1.地址栏输入网址访问页面(www.baidu.com) 2.a标记默认跳转 3.submit按钮的表单提交 2.异步(Asynchronous) 在一个任务进行中时,可以开启其它的任务 异步访问:浏览器在向服务器发送请求时,不耽误用户在网页上做其它的操作 使用场合: 1.用户名的重复验证 2.聊天室 3.股票走势图 4.搜索框建议(百度,京东)
2.AJAX
1.Asynchronous Javascript And Xml 异步的 js 和 xml 2.本质: 使用js提供的异步对象(XMLHttpRequest),异步的向服务器发送请求, 并接受响应数据(数据格式是Xml) AJAX请求中,服务器响应回来的数据部分数据而不是完整的页面, 并且可以以无刷新的效果来更改页面的局部内容。 3.创建XMLHttpRequest对象-异步对象(xhr) 标准创建: var xhr=new XMLHttpRequest(); IE8以下: var xhr=new ActiveXObject("Microsoft.XMLHttp"); 允许通过window.XMLHttpRequest 来判断浏览器是否支持标准创建, 如果浏览器不支持标准创建,那么window.XMLHttpRequest的值就是null if(window.XMLHttpRequest){ var xhr=new XMLHttpRequest(); }else{ var xhr=new ActiveXObject("Microsoft.XMLHttp"); } 4.XHR常用方法和属性(重点) 1.open() 作用:创建请求 语法:xhr.open(method,url,isAsyn); 1.method string类型 请求方式:get/post 2.url string类型 请求地址 3.isAsyn boolean类型 指定采用同步(false)还是异步(true)的方式发送请求 2.readyState 属性 作用:表示xhr对象的请求状态 值:0-4表示5个状态 0:请求尚未初始化 1:已经打开到服务器的链接,正在发送请求中 2:请求完成 3.正在接收服务器端的响应 4.接收响应数据成功 注意:当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){ //接收响应回来的结果 var resText=xhr.responseText; console.log(resText); } } 5.send() 作用:发送请求 语法:xhr.send(body) body:请求主体 如果没有请求主体,body位置处为null(get) 如果有请求主体,则放请求主体数据到body位置(post) 5.发送异步请求的步骤 1.创建xhr对象 2.创建请求 3.设置xhr的onreadystatechange(回调函数) 判断状态,并接收响应回来的数据 4.发送请求
5.使用ajax发送post请求
注意两点:
1.post的请求将数据放在请求主体中 xhr.send(body); ex: xhr.send("uname=value1&upwd=value2"); 2.在发送请求之前,需要手动修改请求消息头 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
6.js对象数据格式
1.js对象的数据格式
var lindaiyu=[]; lindaiyu[0]="林黛玉"; lindaiyu[1]="1990"; lindaiyu[2]="160cm"; lindaiyu[3]="50kg"; 改版: var lindaiyu=[]; lindaiyu["name"]="林黛玉"; lindaiyu["birth"]="1990"; lindaiyu["height"]="160cm"; lindaiyu["weight"]="50kg"; ex:取值 lindaiyu["name"] 数组描述的是林黛玉的个人信息,如果你把林黛玉看成是一个对象,
那么她的个人信息就是她这个对象的属性。
js对象的语法: var 对象名={ 属性:值, 属性:值, 属性:值, 属性:值 }; ex:林黛玉这个对象所对应的属性如下 var lindaiyu={ name:"林黛玉", birth:"1990", height:"160cm", weight:"50kg", } 如果对象取值的时候,直接对象.属性 名称就可以 ex:lindaiyu.name --->林黛玉
7.JSON
1.什么是JSON JavaScript Object Notation js 对象 表现方式 js对象表示法,即以js对象的格式表现出来的字符串。 2.JSON语法 1.JSON对象 1.用一对{}来表示一个对象 2.对象的属性名称,必须用""引起来(单引号不可以),值如果是字符串的话,必须也用""引起来。 ex: var computer='{ "name":"电脑", "price":5600 }' 2.JSON数组 1.普通数组 '["小乔","大乔","貂蝉"]' 2.对象数组 '[ { "name":"小乔", "height":"160cm", "age":18 }, { "name":"大乔", "height":"163cm", "age":20 }, { "name":"貂蝉", "height":"165cm", "age":21 } ]' 3.JSON文件创建 以.json为后缀的文件,里面包含的是符合json格式的数据 4.将JSON字符串,转换成js对象/数组 var mperson='{"name":"TOM","age":18}'; //json对象 var arr='["小乔","大乔","貂蝉"]'; //json数组 var arr1='[ {"name":"Lucy","age":19}, {"name":"Lily","age":19} ]'; //json数组 如何把上面的数据转换成js对象/数组格式 1.使用eval()将数据转换成js对象数组(不推荐) 2.使用JSON.parse()来将JSON字符串解析为js对象 var obj=JSON.parse(mperson); //js对象 var obj=JSON.parse(arr);//js数组 var obj=JSON.parse(arr1);//js数组
2.JS对象数据格式
var 对象名={
属性:值, 属性:值, 属性:值
}
取值:对象名称.属性
3.JSON数据格式
var person='{
"name":"TOM", "age":12
}'
4.将JSON格式的数据转换js对象/数组
1.eval()
2.JSON.parse
4.1在php中,可以直接将数组转换成json格式的字符串
语法:
通过json_encode()将数组转换为JSON字符串,并返回转换后的结果 ex: 在php中 $array=["钉钉","当当","冰冰"]; $str=json_encode($array);
8.XML
AJAX:Asynchronous Javascript And Xml
1.什么是XML
eXtensible Markup Language 可扩展的 标记 语言 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:var xmlDoc=xhr.responseXML; xmlDoc.getElementsByTagName("Student");
4.在PHP中返回XML格式的字符串
1.必须增加响应消息头 header("Content-Type:application/xml"); 2.按照XML的语法结构,拼xml字符串,再响应给前端
$xml=""; $xml.=""; ... $xml.=" "; echo $xml;