AJAX1

第一章

http 协议

① 学习http协议的目标

  1. 调试ajax应用程序中"看不见模不着"的错误

  2. 进行web访问优化 ——— 高阶面试题

②URL

  世界上任何一个建筑必须有一个"地址"

  互联网上任何一个资源(html/img/css/js/php)必须有一个"URL"才能被访问

标准URL语法:://:@:/;?#

方案: 指定以哪种 协议 从服务器上获取指定资源

  常见方案:  http/https/ftp/mailto/file/telnet等

主机名: 资源所在服务器ip地址或者域名(DNS转换IP)

  http://127.0.0.1  <=>  localhost，本地计算机

端口号: 每个程序在计算机上运行时都有一个监听端口号，整型数字(1～65535)

  DOS操作系统命令: netstat -an/ano

apache  80,443

mysql   3306

  ftp     21  文件上传下载

ssh     22 安全的远程登录

  telnet  23  远程登录(不加密)

  smtp    25  邮件传输

  dns     53  域名解析(把网址转换成ip地址)

http    80 超文本传输协议(传送网页)

  pop3    110 邮件接收协议

https  443 加密超文本传输协议(https的SSL加密是在传输层实现的)

? 参数: http://127.0.0.1/1.php?uname=tom&upwd=123

# 相对URL/绝对URL:1. 以方案开头绝对URL:  

                  2. 不以方案开头相对URL:  

③ URL/URN/URI

Unified ResourceLocator统一的资源定位符

Unified ResourceNaming统一的资源命名符

Unified ResourceIdentifier统一的资源识别符,URI 包含 URL 和 URN

  URL:  

       

  URN:  

       

_______________________________________________________________________________________________

HTTP 协议概述:用于传输网页的内容(html/css/js/img/mp3/avi...)

互联早期没有http协议，IETF (国际互联网任务委员会)制定协议标准

1990年 http/0.9  有严重缺陷

1996年 http/1.0  标准 RFC1945

1999年 http/1.1  沿用到现在

2015年 http/2发布，但不叫http/2.0，因为标准委员会不打算再发布子版本，所以下一个新版本将是http/3

http/2的特点:

  ① 二进制协议，头信息和数据体都是二进制，统称为帧(frame)，并定义了近十种帧

  ② 多工，复用TCP连接，在一个连接里,客户端和浏览器都可以同时发送多个请求或回应,避免了队头堵塞

  ③ 数据流，http/2将每个请求或回应的所有数据包称为一个数据流，都有一个独一无二的编号，数据包发送时，必须标记数据流id，用于区分数据哪个数据流。规定客户端发出的id为奇数，服务端发出的id为偶数

  ④ 引入头信息压缩机制，一方面头信息使用gzip或compress压缩后再发送，另一方面客户端和服务端同时维护一张头信息表，所有字段都存入这个表，生成一个索引号，只发送索引号，而不需要发送同样的字段

  ⑤ 服务器推送，http/2允许服务端未经请求主动向客户端发送资源

http协议工作原理:请求响应式

① 客户端浏览器发送请求给web服务器(apache)，请求

② web服务器接收请求，处理数据，并且将结果返回客户浏览器，响应

http协议的数据组成:

请求(request): 请求起始行，请求头信息，请求主体内容

               客户端浏览器 发送给 服务器

请求方法:GET/POST/PUT/DELETE/HEAD/CONNECT/TRACE/OPTIONS

Content-Type: 描述请求主体的内容类型(三种)            //指定提交给服务器表单数据的编码方式

text/plain          请求数据是普通文本，特殊字符不行

application/x-www-form-urlencoded  请求主体经过二进制编码，可以是普通字符/特殊字符/标点符号

multipart/form-data  表单中包含上传文件数据，进行二进制编码，普通字符/特殊字符/标点符号不行

响应(response): 响应起始行，响应头消息，响应主体

                服务器 发送给 客户端浏览器

响应状态码:

100-199  提示性信息。100: 继续；101: 切换协议

200-299  成功响应。200: OK成功响应

300-399  需要客户端重定向。301: 永久性转移；302: 暂时性转移；304: 没有被修改过

400-499  客户端请求错误。403: 服务器收到请求但拒绝提供服务；404: Not Found请求资源不存在

           400:前端提交的数据字段与后台不一致，或没有将对象用JSON.stringify转化为字符串

500-599  服务端运行错误。500: 内部服务器错误

响应主体的内容类型(Content-Type):①AJAX接收服务器返回的数据

text/plain  纯文本

text/html   文本与网页

text/css    css文件

application/javascript  js程序

application/xml         xml格式的数据

application/json     json格式的数据

 header('Content-Type:text/html;charset=utf-8');  //设置响应主体类型(放在php顶部，指定php发送给ajax的数据类型)

面试题: http/1.1比http/1.0改进了哪些地方

① 支持虚拟主机技术，在一个web服务器上同时并存多个不同域名网站。Host: tmooc.cn/tts/jobshow

② 支持持久化连接技术，早期http1.0不支持持久连接。服务器机制: 三次握手/四次挥手

  Connection:keep-alive 持久化连接(默认打开)，客户端和服务器之间的连接会保持一段时间,网页数据传输完毕后才会断开

③ 支持代理连接: Proxy:xxx，对于软件很有必要

第二章*****************************************************************************************

面试题: get请求和post请求的区别

 GETPOST

语义客户端想获取服务器(程序)上指定资源客户端想传递数据给服务器端(程序)

如何发起浏览器地址栏输入URL、超链接、标签href /src、js跳转、表单GET、AJAX-GET表单-POST提交、AJAX-POST

安全级别不安全不安全

表单提交请求URL地址中请求数据主体

数据长度总长度(1KB),字母数字1000个(请求在url地址中)没限制(在请求主体中)

是否需要编码需要编码,一个汉字9个字节自动编码

是否适合缓存类似于查找的过程，不用每次都与数据库连接，适合使用缓存一般是修改、删除的操作，必须与数据库交互，一般不使用缓存

注意: http协议并未规定GET/POST的请求长度限制是多少，对GET请求参数的限制是来源于浏览器或web服务器，浏览器或web服务器限制了url的长度，不同的浏览器和web服务器，限制的最大长度不一样

浏览器中如何发起PUT请求:  AJAX-PUT

浏览器中如何发起DELETE请求:  AJAX-DELETE

_______________________________________________________________________________________________

Ajax: Asynchronous JavaScript AND Xml: 异步JavaScript和Xml，用于在Web页面中实现异步数据交互，实现页面局部刷新

php内容无变化，html中form的action="#"，input不需要name属性，使用type="button"提交(不会跳转)

不使用ajax时需要用或者提交数据，用name添加数据

为type="button"绑定事件(注意大小写):

① 创建ajax对象:var xhr = new XMLHttpRequest();

② 为xhr绑定监听(状态改变触发,触发4次)事件:            //在里面加if(...)判断使只执行一次

xhr.onreadystatechange=function(){

if(xhr.readyState===4&&xhr.status===200){//判断的固定格式

elem.innerHTML=xhr.responseText;//接收服务器(程序)返回数据，即请求url(php)的返回结果

}}//php尖括号外面不能有回车或空格，Network→Response调试

GET请求方法:

③ 创建一个与服务器程序的连接

 xhr.open('GET','login.php?name=(请求url)'+name+'&...',true(是否异步));

④ 发送请求消息:  xhr.send(null);

POST请求方法:

③创建一个与服务器程序的连接:xhr.open('POST','login.php(请求url)',true(是否异步));

④ 设置请求主体内容类型:

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

⑤ 发送请求消息:  xhr.send('name='+name+'&pwd='+pwd+'&...');

ajax简介:

2002年，由Google在搜索引擎，提出GoogleSuggest自动提示，提出AJAX概念

AJAX=HTML+CSS+JS+DOM+HTTP+XML

ajax的作用: 实现 无刷新、无提交、无跳转 的情况下页面内容局部更新

ajax应用场合: 股票走势图、搜索建议、聊天室、注册...

交互模型就是Ajax在客户端引入一个执行引擎，它一边应付用户的请求，一边把接收到的数据传送给服务器，同时把服务器端返回的数据，展现给客户的技术模式

工作方式:

同步请求: 不使用ajax的请求方式均属于同步，阻塞的

   客户端                服务器

填写表单等待

点击提交发送(等待)      操作

接收数据等待

异步请求:只有ajax一种实现方式，非阻塞的

  填写表单                操作

  点击提交发送(操作)      操作

  接收数据                操作

第三章*****************************************************************************************

AJAX对象与属性

核心对象:xhr=newXMLHttpRequest();//作用发送请求并且接收服务器返回数据

兼容性:

if(window.XMLHttpRequest){

  var xhr = newXMLHttpRequest();                     //W3C(IE9、chrome、firefox、safari)

}else{

  var xhr = newActiveXObject("Microsoft.XMLHTTP");//IE6、7、8(极少)

}

属性:

readyState: 表示xhr对象当前状态，不能赋值，其值会随请求→响应过程自动改变(0→4)

            可取值: 0 UNSENT     请求信息尚未发送

                    1 OPENED     xhr己经创建与web服务器连接

                    2 HEADERS_RECEVICED    xhr己经接收到响应消息头部

                    3 LOADING    xhr正在收到响应消息主体

4DONE       xhr接收完成响应消息主体

status:        服务器响应状态码，主要:200成功响应

responseText:  保存响应消息主体(文本,响应数据)

responseXML:   保存响应消息主体(XML)

成员方法:

open(method,url,isAsyn);创建/打开一个服务器连接

    method: 请求方法 GET/POST/DELETE...

    url:    请求地址

isAsyn  发送请求方式是异步请求(true)/同步请求(false)

send();发送请求主体

GET:  send(null);

POST: send('name=tom&age=10(拼接)');

成员事件:

onreadystatechange():  当xhr状态改变时触发该事件

第四章*****************************************************************************************

AJAX处理不同的数据类型(JSON/JavaScript/XML)

XML是字符串格式，用于描述数据，麻烦→重量级

JSON是字符串格式，用于描术数据，简单→轻量级，是字符串格式的数组或对象

JSON(JavaScript Object Notation，js对象表示法)是一种轻量级的数据交换格式，易于阅读和编写，语法基于JS，但目前己经被各种语言支持，成为一种"异构系统交互数据的标准"

JSON字符串语法要求:

①一个JSON字符串有且只有一个根: {...}对象  [...]数组

比如:'[1,2,3,4]'                                  //数组

     '{ "name":"tao","age":10 }'                  //对象

     '[ {"name":"tao"},{"name":"james"} ]'        //由对象组成的数组

$output=["page"=>$num];//组成数组，再用函数转为json

echo'{"code":1,"count":'.$counts.'}';//直接拼接输出

② JSON中可以表示数字、bool、null、字符串 ————— 字符串必须用双引号引起来

③ []数组可以包含多个值，使用逗号分隔

④ {}对象中可以包含多个键值对，使用逗号分隔，键和值之间用冒号，键必须是用双引号贴身引起来

_______________________________________________________________________________________________

PHP→AJAX→JSON开发流程

服务器端php:  将数组转换成json字符串，并发送给客户端浏览器(注意输出的类型,在客户端输出确认)

                          可能是'数组'也可能是'对象'

header('Content-Type:application/json;charset=utf-8');  //修改响应主体内容类型为json

$json = json_encode($arr); //$arr数组可手工创建(创建时要加单引号)对象或 索引/关联数组

          //或从数据库中得到(可仅转换字符串的某个下标的值，再与手写的json语句按php语法拼接)

echo '结果为:'.$json；       //$json: json格式的字符串，可按php语法与其它数据(如php变量)拼接

json_decode($json);          //把JSON字符串解析为PHP对象或数组

客户端js:  将json字符串转换成js对象

["...":"..."]json字符串  →  js数组(对象组成的数组)[{},{},{}]  →  用模板字符串拼接创建DOM

var obj = JSON.parse(xhr.responseText);//把xhr.responseText(后端响应的数据),转换成对象

varstr=""；

for(var i=0;i

  var o = obj[i]；

 str += `

           ${o.name}

           ${o.price}

          `

}

tb1.innerHTML=str；

对象转json字符串: var json =JSON.stringify(obj);

json字符串转对象: var obj =JSON.parse(json);

jQuery中的API: json字符串转为对象: var obj =$.parseJSON(json);

jQuery的ajax中:

若服务器端代码直接返回一个常量字符串(没有定义String变量)，success会自动将json转为对象

若服务器端返回一个定义过的String，则success会接收到一个json字符串，不会转为对象

_______________________________________________________________________________________________

jquery中的 ajax 方法

①$("选择器").load('URL',[data],[fn]);发起一个 XHR 请求，data为null则为GET，否则发起POST请求，get会把服务器端返回的响应数据(必须是html片段)追加为选定元素的innerHTML

1.若有参数fn,则在请求成功后，调用该函数

2. 接收响应数据必须是html片段，且会被追加到$(...)中，用于添加动态php中的header和footer

比如:$("#header").load('data/header.php');

  3. 选中元素内容必然被清除

jQuery load() 方法是简单但强大的 AJAX 方法

load() 方法从服务器加载数据，并把返回的数据放入被选元素中

$(selector).load(URL,[data],[callback]);

可加载:  *.txt、*.php、*.html等文件

.load()方法，与$.get()不同，允许规定要插入的远程文档的某个部分，通过url参数的特殊语法实现，如果该字符串中包含一个或多个空格，紧接第一个空格的字符串则是决定所加载内容的jQuery选择器

例如: $("#result").load("ajax/test.html #container");

如果执行该方法，则会取回ajax/test.html的内容，不过jQuery会解析被返回的文档，来查找带有容器 ID的元素,该元素连同其内容，会被插入带有结果ID的元素中，所取回文档的其余部分会被丢弃

jQuery使用浏览器的 .innerHTML 属性来解析被取回的文档，并把它插入当前文档。在此过程中，浏览器常会从文档中过滤掉元素，比如,