ajax http

AJAX - 阿贾克斯

1、URL

1、作用

用于表示互联网上任意一个资源的位置

2、详解

格式:

://:@:/;?#

1、scheme

方案或协议,以哪种方式到服务器上获取资源,协议不区分大小写,常见的协议:http,https,ftp,scheme可以省略,省略的话,默认是http

2、user

访问特定资源时要用到的用户名

3、pwd

访问特点资源时要用到的密码

4、host :要访问的服务器的主机名称,或IP地址,或 域名(由DNS转换为IP地址)

5、port :端口号,可以省略,默认为 80

6、path :路径,要访问的资源在服务器上的路径

7、params :提交的参数

8、query :查询字符串,要传递给服务器的数据

9、frag : 锚点

http://localhost/a.html#NO1

http://admin:admin@localhost/abc.php?uname=tom&upwd=jerry#NO1

2、HTTP协议

1、什么是HTTP

Hyper Text Transfer Protocol

超文本传输协议

规范了数据是 如何打包 以及 如何传递的

2、详解 Message 消息/报文

  message指的是在http客户端与服务器之间传递的数据块分类

1、请求(request)消息

客户端要传递给服务器的数据都是什么,由三部分组成

1、请求起始行

1、请求方法

1、GET

表示客户端向服务器获取资源时使用(img/js...)

特点:

1、无请求主体

2、靠地址栏(查询字符串)传递数据给服务器

2、POST

表示客户端想传递数据给服务器使用

特点:

1、有请求主体

3、PUT

表示客户端要把文件放置到服务器上

特点:

1、有请求主体

4、DELETE

表示客户端要删除服务器上指定的数据(禁用)

5、HEAD

表示客户端只想获取指定的响应头

6、CONNECT

测试连接

7、TRACE

追踪请求路径

8、OPTIONS

选项,保留以后去使用

2、请求URL

3、协议版本 :HTTP/1.1

2、请求头(消息头)

    Host:localhost

        告诉服务器请求哪一个虚拟主机

    Connection:keep-alive

        告诉服务器做持久连接

    User-Agent

        告诉服务器,客户端浏览器的类型

    Cache-Control:max-age=0

        告诉服务器缓存信息:max-age,即不缓存

    Accept-Language:zh-CN

        告诉服务器自己能接收的自然语言

    Accept-Encoding:gzip

        告诉服务器自己能接收的压缩类型

    Referer:url

        告诉服务器来自于哪个页面

3、请求主体

Form Data:真正的请求主体

2、响应(response)消息

服务器要传递给浏览器的数据,由三部分组成

1、响应起始行

1、协议版本号:HTTP/1.1

2、响应状态码

告诉浏览器是否正常处理所有的请求

1、1xx :100-199 ,提示信息

2、2xx :成功处理请求以及给出响应

200 : OK

3、3xx :需要重定向

301 :永久性重定向

302 :临时性重定向

4、4xx :客户端请求错误

404 :请求的资源不存在

403 :无访问权限

405 :请求方法不被允许

5、5xx :服务器运行错误

500 :服务器内部错误

3、原因短句

对状态码的简单解释

200 :OK

404 :Not Found

403 :Forbidden

405 :Method Not Allowed

2、响应头(消息头)

1、Content-Type

作用:告诉浏览器响应回来的数据是什么类型的,相当于告诉浏览器要用什么样的方式解析响应回来的数据

值:

1、text/html:响应回来的数据是html文本

2、text/plain:响应回来的数据是普通文本

3、text/css:响应回来的数据是css样式

4、application/javascript:响应回来的数据是JS脚本代码

5、application/xml:响应回来的数据是xml格式字符串

6、application/json:响应回来的数据是json格式字符串

7、images/jpeg:响应回来的数据是jpeg的图片

3、响应主体

Response / Preview

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;//不缓存

Cache-Control:no-cache;//不缓存

2、Expires 消息头

作用:指定缓存过期的确切时间

Expires:Fri,27 Oct 2017,15:59:59 GMT

如果希望客户端永不缓存网页的话,可以给一个过期的时间

Expires:Fri,27 Oct 2017,00:00:00 GMT

Expires:0;--非标准写法,执行性不是特别好

4、如何在网页中设置消息头

1、更改服务器的配置文件

2、在网页上增加消息头

1、html

禁用缓存配置

               

               

ex:

2、php

header("Expires:0");

Response.AddHeader("Expires","0");

4、DOM操作

1、什么是DOM

完整的JavaScript的组成

1、JS核心 :ECMAScript

2、DOM :Document Object Model

文档对象模型

本质:JS提供了一系列的方法和属性,用于操作页面的元素

3、BOM :Browser Object Model

浏览器对象模型

本质:JS提供了一系列的方法和属性,用于操作浏览器

2、使用JS获取页面上的某个元素

窗前明月光

1、为元素增加一个id属性

窗前明月光

2、在JS中,允许通过元素的ID来获取指定的元素

var elem=document.getElementById("元素ID");

elem : 指定ID值的元素在JS中的表现形式(DOM对象)

练习:

1、创建 03-dom-getElementById.html

2、页面中创建一个div,id为d1,内容自定

3、页面中创建一个按钮,单击时,获取id为d1的元素,并将结果打印在控制台上

3、获取 / 设置 某元素中的全部内容

属性:innerHTML

语法:

取值:var value = DOM对象.innerHTML;

设置:DOM对象.innerHTML = 值;

练习:

1、在上面的练习基础上完成

2、添加一个按钮,单击时,获取div中的文本,并打印在控制台上

3、添加一个按钮,单击时,将div中的文本内容更改为 "我的第一个DOM操作"

4、获取 / 设置 表单控件的值

            取值:var value = DOM对象.value;

在DOM中,要获取/设置表单控件的值,使用 value 属性

设置:DOM对象.value = 值;

5、简化 document.getElementById()

var elem = document.getElementById("id");

根据 "指定的ID值" 获取 "对应的HTML元素"

简化:

1、将document.getElementById()封装成一个函数,取名叫 $()

2、将 "指定的ID值",作为 $() 的参数

3、将 "对应的HTML元素",作为 返回值 进行返回

function $(id){

return document.getElementById(id);

}

练习:

1、封装 $() , 用于简化 document.getElementById();

2、在页面中创建一个文本框(id="uname"),再创建一个div(id="d1"),创建一个按钮

3、单击按钮时,将文本框中的数据,以一级标题的形式显示div中

6、HTML 元素事件

1、什么是事件

事件就是允许通过用户的行为来激发的操作

ex:

onclick :鼠标单击时激发的事件

2、其它事件

1、文本框 和 密码框

1、onfocus

元素获取焦点时激发的操作

2、onblur

元素失去焦点时激发的操作

作业:

1、模拟表单的数据验证

1、页面中创建如下元素

1、文本框-用户名称-uname

2、密码框-用户密码-upwd

3、密码框-重复密码-cpwd

以上三个元素后,各创建一个span(用于显示提示内容)

2、添加以下事件完成数据的验证

1、文本框获取焦点时,提示,用户名称6-18位

2、文本框失去焦点时,判断,用户名称是否为空并给出相应提示(用户名不能为空/通过)

3、upwd获取焦点时,提示,密码6-18位

4、upwd失去焦点时,判断,密码是否为空并给出提示(参考文本框提示)

5、cpwd失去焦点时,判断 cpwd的值是否与 upwd的值一致,并给出提示(通过/两次密码输入不一致)

2、提供以下数组,在网页中完成数据加载操作,效果 参考 作业.png

var infos = [

["《西游记》","吴承恩","神话故事..."],

["《水浒传》","施耐庵","动作片..."],

["《红楼梦》","曹雪芹","爱情片..."]

];

/**/*/===============================*/**/\

1、DOM - 事件

1、onload

window.onload 事件,网页在加载时要执行的操作

练习:

1、给定以下数组

var province = ["黑龙江","吉林","辽宁"];

2、当网页加载时,将province的数据,显示在一个选项框中

2、onchange

1、给定如下数组

var city = [

["哈尔滨","齐齐哈尔","牡丹江"],

["长春","吉林","四平"],

["沈阳","大连","铁岭"]

];

2、onchange 事件

1、作用

当选项框中的选项发生改变时要激发的操作

===================================================

1、AJAX

1、名词解释

1、同步(Synchronous)

在一个任务进行中,不能开启其它的任务

同步访问:浏览器在向服务器发送请求的时候,浏览器只能等待服务器的响应,不能做其它的事情

2、异步(Asynchronous)

在一个任务进行过程中,可以随时开启其它任务去执行

异步访问:浏览器在向服务器发送请求的时候,不耽误用户在网页上做其它的操作

使用场合:

1、用户名的重复验证

2、聊天室

3、股票走势图

4、搜索建议(百度,京东,淘宝的搜索框)

2、什么是AJAX

Asynchronous Javascript And Xml

异步的      JS        和  Xml

本质:使用JS所提供的异步对象,异步的向服务器发送请求,并接收响应的数据(响应数据的格式是Xml的,但已过时)

使用AJAX发送请求时,服务器响应回来的是部分数据而不是完整的页面,可以以无刷新的效果来更改页面中的内容

3、AJAX的核心对象 - 异步对象

异步对象 - XMLHttpRequest

在 AJAX 中,所有的请求 和 响应 都是由异步对象来完成的。

4、创建 AJAX的核心对象

标准创建:var xhr=new XMLHttpRequest();

IE8及以下:

var xhr=new ActiveXObject("Microsoft.XMLHttp");

通过 window.XMLHttpRequest 操作来判断浏览器是否支持标准创建法

if(window.XMLHttpRequest){

//当前浏览器支持 XMLHttpRequest ,标准创建

}else{

//当前浏览器只能用 ActiveXObject() 创建

}

练习:

1、创建一个 xhr 对象,并将创建好的对象打印在 控制台上

5、xhr 的常用方法 和 属性(难点)

1、open() - 方法

作用:创建请求

语法:xhr.open(method,url,isAsyn);

1、method

string类型

请求方式:get,post

2、url

string类型

请求地址

3、isAsyn

boolean 类型

指定采用同步(false)还是异步(true)的方式发送请求

ex:

xhr.open("post","test.php",true);

通过xhr,采用post的请求方式,异步的向test.php发送一个请求

练习:(5分钟)

1、创建一个网页04-getResponse.html,网页中创建一个按钮,单击时完成以下功能

1、获取 xhr 对象

2、创建一个请求,采用异步的方式,get提交方式向04-response.php页面发送一个请求

2、创建04-response.php,响应输出一句话"我的第一个AJAX程序 "

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);

alert(resText);

}

}

5、send() - 方法

作用:发送请求

语法: xhr.send(请求主体);

如果没有请求主体的话,该位置为 null

如果有请求主体,则放请求主体的数据

6、发送异步请求的步骤

1、创建 xhr

2、创建请求 xhr.open()

3、设置xhr的onreadystatechange事件(回调函数)

回调函数:要在readyState的值发生改变之后才回来调用的函数

4、发送请求

练习:

1、创建05-response.php,响应输出一句话"我的AJAX练习"

2、创建05-ajax-exercise.html

1、增加一个按钮,增加一个div(id="show")

2、单击按钮时,异步的使用get提交方式向05-response.php发送一个请求

3、将响应回来的数据以

标题的方式显示在div中

7、使用GET提交方式,发送请求数据

在地址后拼参数信息

05-response.php?name1=value1&name2=value2

在php中取值:

$n1=$_REQUEST["name1"];

$n2=$_REQUEST["name2"]

作业:

1、登录名称的重复性验证,参考学子商城-注册页

/*==================================================================*/

1、使用AJAX发送POST请求

注意两点:

1、post的请求数据要放在请求主体中

xhr.send("name1=value1&name2=value2");

2、

使用AJAX发送post请求时,默认会将 Content-Type的消息头更改为 text/plain, 导致在后台无法正常接收请求的数据

所以,在发送post请求时,必须手动的将Content-Type的消息头更改为 "application/x-www-form-urlencoded"

修改方式如下:

要在发送请求之前,增加如下代码:

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

练习:

使用post请求方式,完成学子商城的登录验证操作

练习:(10分钟)

1、03-province.php

1、["黑龙江","吉林","辽宁"]

2、将数组解析,拼成

2、03-province.html

网页加载时,向03-province.php 发送请求,再获取响应数据,并填充到 的选项发生改变时,向03-city.php 发送一个请求,并将选中的省份的值,传递过来

3、03-city.php 中,根据传递过来的省份的值,将城市的信息拼成

一个