day01
AJAX DAY01:
* 基本内容
* 同步交互与异步交互
* 同步交互
* 客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户是不能做任何其他事情(等).
* 异步交互
* 客户端向服务器端发送请求，直到服务器端进行响应，这个过程中，用户可以做任何其他事情(不等)
* AJAX
* Asynchronous JavaScript and Xml
* 直译中文 - javascript和XML的异步
* (不严格的定义)客户端与服务器端进行交互,而无需刷新当前页面的技术,称之为Ajax
* Ajax实现的是B/S架构下的异步交互
* 实现异步交互的技术
* <iframe src="">元素
* 同步与异步的区别
* 同步交互
* 执行速度相对比较慢
* 响应的是完整的HTML页面
* 异步交互
* 执行速度相对比较快
* 响应的是部分数据
* Ajax具有核心对象
* XMLHttpRequest对象
* 创建XMLHttpRequest对象
function getXhr(){
// 声明XMLHttpRequest对象
var xhr = null;
// 根据浏览器的不同情况进行创建
if(window.XMLHttpRequest){
// 表示除IE外的其他浏览器
xhr = new XMLHttpRequest();
}else{
// 表示IE浏览器
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
// 创建核心对象
var xhr = getXhr();
* Ajax的核心对象
* 属性
* readyState
* status
* 方法
* open() - 与服务器端建立连接
* send() - 向服务器端发送请求
* 事件
* onreadystatechange事件
* 作用 - 监听服务器端的通信状态改变
* 实现Ajax的异步交互步骤
* 创建XMLHttpRequest核心对象
* 固定写法 - 独立编写
* 与服务器端建立连接
* 使用XMLHttpRequest对象的open(method,url)方法
* method - 设置当前请求的类型
* url - 设置当前请求的地址
* 向服务器端发送请求
* 使用XMLHttpRequest对象的send(请求参数)方法
* 请求参数的格式 - key=value
* 接收服务器端的响应数据
* 使用XMLHttpRequest对象的onreadystatechange事件,监听服务器端的通信状态
* 使用XMLHttpRequest对象的readyState属性,判断服务器端的当前状态(0-4)
* 使用XMLHttpRequest对象的status属性,判断服务器端的状态码(200)
* 使用XMLHttpRequest对象的responseText属性,接收服务器端的响应数据
* GET与POST的区别
* GET请求类型
* send()方法不起作用,但是不能被省略
xhr.send(null);
* 请求参数 - 添加到URL?key=value
* POST请求类型
* send()方法起作用
* 在send()方法被调用前,使用setRequestHeader()方法设置请求头信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
* 使用Ajax的原则
* 小则怡情,大则伤身
* 另外的实现Ajax的步骤
* 创建XMLHttpRequest对象
* 注册监听
* 建立连接
* 发送请求
* 实现Ajax的六步是什么?(不标准)
* 创建XMLHttpRequest对象
* 建立连接
* 发送请求
* 注册监听 - onreadystatechange事件
* 获取服务器端的通信状态 - readyState
* 获取服务器端的状态码
*
day02
回顾AJAX第一天内容:
* 基本内容
* 同步交互与异步交互
* 同步交互
* 客户端向服务器端发送请求，直到服务器端进行响应，这个过程中，用户不能做任何其他事情
* 异步交互
* 客户端向服务器端发送请求，直到服务器端进行响应，这个过程中，用户可以做任何其他事情
* Ajax
* Ajax实现B/S架构下的异步交互
* (不严格定义)客户端向服务器端发送请求,而无需刷新当前页面的技术
* 实现异步交互的其他技术
* <iframe src="">元素
* Ajax的核心对象 - XMLHttpRequest对象
* XMLHttpRequest对象
* 创建核心对象
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
* 属性
* readyState属性 - 表示当前服务器端的通信状态
* 0 - (服务器端)尚未初始化
* 1 - (服务器端)正在接收
* 2 - (服务器端)接收完毕
* 3 - (服务器端)正在响应
* 4 - (服务器端)响应完毕
* status属性 - 表示当前服务器端的状态码
* 200 - 请求成功
* 404 - 网页找不到(请求路径不正确)
* 500 - 服务器端错误
* 方法
* open(method,url)方法
* 作用 - 与服务器端建立连接
* 参数
* method - 设置请求类型(GET或POST)
* url - 设置请求地址
* send()方法
* 作用 - 向服务器端发送请求参数
* 事件
* onreadystatechange事件
* 作用 - 监听服务器端的通信状态
* 实现Ajax的步骤
* 创建XMLHttpRequest对象
var xhr = getXhr();
* 与服务器端建立连接 - open()
* GET方式 - open("get")
* POST方式 - open("post")
* 向服务器端发送请求 - send()
* GET方式
* send()方法不起作用(不能使用send()方法发送请求数据)
* send()方法不能被省略 - send(null)
* 请求数据 - 增加在URL?key=value
* POST方式
* send()方法起作用
* 注意
* 在send()方法调用前,调用setRequestHeader()方法
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
* 接收服务器端的响应
* 使用onreadystatechange事件监听服务器端
* 判断readyState属性值等于4(响应完毕)
* 保证status属性值为200(表示请求成功)
* 使用responseText属性接收服务器端的响应数据
* 面试题
* 另外四步实现
* 创建核心对象
* 注册监听
* 建立连接
* 发送请求
* 实现Ajax的六步是什么?
AJAX DAY02:
* 接收服务器端的响应数据
* 使用XMLHttpRequest核心对象的responseText属性
* 该属性只能接收文本(HTML)格式
* 问题
* 解析过程比较复杂(拆串)
* 拆串或拼串极容易出错
* XML格式
* 基本内容
* HTML、XHTML、DHTML和XML的区别
* HTML就是网页 - 元素定义大小写
* XHTML就是严格意义的HTML - 元素定义小写
* DHTML - BOM|DOM
* XML - 配置文件|数据格式
* XML文件的扩展名为".xml"
* XML的定义方式与HTML非常相似
* HTML的元素预定义好的
* XML允许自定义元素
* XML的版本
* 1.0版本 - 目前唯一版本
* 1.1版本 - 几乎没有人使用
* 注意
* 版本不会再更新
* XML的作用
* 作为数据格式 - 存储数据
* XML语法
* 声明
<?xml version="1.0" encoding="UTF-8" ?>
* version - 设置当前XML文件的版本
* encoding - 设置当前XML文件的编码
* 注意 - 出现在0行0列上
* 定义元素
* 根元素
* 必须是起始标签
* 只能定义一个
* 定义元素
* 元素名可以自定义
* 分类
* 起始标签或单标签
* 定义属性
* 定义注释
* 练习 - 使用XML文件定义省份和城市信息
* 如何定义都可以,符合XML语法即可
* 决定着后面使用Javascript解析的难易程度
* DOM解析XML
* 创建XML的解析器
function parseXML(xml){
// 声明解析XML后的DOM对象
var xmlDoc = null;
// 根据不同的浏览器
if(window.DOMParser){
// 其他浏览器
var parser = new DOMParser();
xmlDoc = parser.parseFromString(xml,"application/xml");
}else{
// IE浏览器
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(xml);
}
return xmlDoc;
}
* 解析XML与解析HTML一致
* 很少使用ById和ByName两个方法
* 注意
* 浏览器不允许读取外部的XML文件
* 浏览器解析符合XML格式的字符串
* Ajax中的XML格式
* 请求的数据格式 - XML
* 客户端如何构建符合XML格式的数据
* 构建的数据类型 - 字符串(string)类型
* 字符串的内容符合XML格式的语法要求
* 服务器端如何接收符合XML格式的数据
* 接收客户端的请求数据 - 字符串(string)类型
* PHP集成了DOM的相关内容
* DOMDocument类
* DOMElement类
* DOMNode类
* 响应的数据格式 - XML
* 服务器端如何构建符合XML格式的数据
* 设置服务器端的响应头"Content-Type"值为"text/xml"
* 构建符合XML格式数据内容
* 手动方式构建字符串(string)内容
* DOMDocument对象的方法
* loadXML(符合XML格式的字符串);
* saveXML()方法进行响应
* 客户端如何接收符合XML格式的数据
* 使用XMLHttpRequest对象的responseXML属性接收
* 接收回来的就是XML DOM对象(不需要使用XML解析器进行解析)
* 直接使用DOM解析XML DOM对象即可
* 练习 - 二级联动(服务器端响应数据格式为XML格式)
* JSON格式
* 基本内容
* JSON - JavaScript Object Notation(JS原生支持)
* JSON数据格式源于javascript
* 特点
* 易于程序员阅读和编写
* 易于计算机解析和生成
* JSON目前是网络上使用最广泛的数据格式之一
* JSON的结构
* Array - 数组
* Object - 对象
* 支持的数据类型
* String字符串
* Number数值
* Boolean - true|false
* Object
* Array
* null
* Ajax中的JSON格式
* 请求格式为JSON
* 客户端向服务器端发送请求为JSON格式的数据
* 构建符合JSON格式的字符串
* 保证定义字符串时,使用单引号(里面使用双引号)
* 服务器端接收JSON格式的数据
* 接收客户端的数据
* 使用json_decode()函数进行解析
json_decode($json,true)
* 响应格式为JSON
* 服务器端向客户端发送响应为JSON格式的数据
* 使用json_encode()函数将PHP变量(array)转换成符合JSON格式的字符串
* 客户端接收JSON格式的数据
* 使用XMLHttpRequest对象的responseText属性接收
* 没有responseJSON属性
* 使用eval()函数进行转换
* 作业 - 使用JSON格式完成二级联动
* HTML(文本格式)、XML格式及JSON格式的优缺点
* HTML格式
* 优点 - 简单
* 缺点 - 解析复杂
* XML格式
* 优点 - 易于构建复杂数据
* 缺点 - 构建、解析复杂
* JSON格式
* 优点 - 轻量级
* 缺点 - 可能转换失败
* 回顾内容
* DOM - 独立于任何开发语言的
* DOM的分类
* DOM CORE
* DOM HTML
* DOM XML
* DOM CSS
* DOM API
* 获取元素
* 创建元素
* 替换元素
* 删除元素
* 插入元素
* ...
*
day03
回顾AJAX第二天内容:
* XML格式
* 基本内容
* XML译为可扩展标记语言
* XML文件的扩展名为".xml"
* XML定义元素与HTML页面类似
* HTML页面的元素是预定义的
* XML的元素是自定义的
* XML的用途
* 配置文件
* 存储数据
* XML基础语法
* 声明
<?xml version="1.0" encoding="utf-8"?>
* version - 设置当前XML文档的版本
* encoding - 设置当前XML文档的编码
* 注意 - 必须出现在0行0列
* 定义元素
* 起始元素 - <></>
* 单元素 - < />
* 定义属性
* 使用注释
* DOM解析XML
* 创建XML解析器
function parseXML(xml){
// 解析后得到的XML DOM对象
var xmlDoc = null;
// 根据不同浏览器操作
if(window.DOMParser){// 其他浏览器
// 创建XML解析器
var parser = new DOMParser();
// 通过解析器得到DOM对象
xmlDoc = parser.parseFromString(xml,"application/xml");
}else{// IE浏览器
// 得到XML DOM对象
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
// 关闭异步加载
xmlDoc.async = false;
// 指定加载XML
xmlDoc.loadXML(xml);
}
// 返回XML DOM对象
return xmlDoc;
}
* 利用DOM API解析XML - 类似于DOM解析HTML
* Ajax中的XML格式
* 客户端向服务器端发送请求 - XML格式
* 客户端如何构建XML格式数据
* 请求数据格式 - key=value
* 构建符合XML格式的字符串(string)
* 服务器端如何接受XML格式数据
* 利用$_GET或$_POST接收请求数据
* PHP集成了DOM内容
* DOMDocument对象
* DOMElement对象
* DOMNode对象
* 服务器端向客户端发送响应 - XML格式
* 服务器端如何构建XML格式的数据
* 手工方式构建符合XML格式的字符串
* 通过saveXML()方法将PHP变量构建成符合XML格式
* 客户端如何接收XML格式的数据
* 使用responseXML属性接收
* 利用DOM进行解析
* JSON格式
* 基本内容
* JSON - JavaScript Object Notation
* 定义
* 是一种轻量级(相对于XML)的数据交换格式
* JSON源于JavaScript,原生JavaScript支持JSON
* 特点
* 易于程序员阅读和编写
* 易于计算机生成和识别
* JSON的结构
* Array - 数组
* Object - 对象
* 注意
* 数组和对象之间可以相互嵌套(多层嵌套)
* 数据类型
* String
* Number
* Boolean
* Array
* Object
* null
* Ajax中的JSON格式
* 客户端向服务器端发送请求 - JSON
* 客户端如何构建JSON格式数据
* 请求数据格式 - key=value
* 手工构建符合JSON格式的字符串
'{"name":"zhangwuji","pwd":"123"}'
* 服务器端如何接收JSON格式的数据
* 利用$_GET或$_POST接收请求数据
* 使用json_decode()函数将符合JSON格式的字符串,转换为PHP变量
json_decode($json,true) - array数组
* 服务器端向客户端进行响应 - JSON
* 服务器端如何构建JSON格式的数据
* 手工方式构建符合JSON格式的字符串
* 使用json_encode()函数将PHP变量转换为符合JSON格式的字符串
* 客户端如何接收JSON格式的数据
* 使用responseText属性接收数据
* 使用eval()函数进行转换
var json = eval("("+data+")");
AJAX DAY03:
* jQuery中的Ajax
* 封装第一层 - 类似于原生Ajax的用法
* $.ajax() - 最复杂
* 选项
* url - 请求地址
* type - 请求类型,默认为GET
* async - 是否异步,默认为true
* data - 请求数据,格式为key:value
* dataType - 响应数据格式
* HTML格式
* XML格式
* JSON格式
* success - 请求成功后的回调函数
function(data,textStatus){}
* data - 响应数据内容
* textStatus - success,请求状态
* error - 请求失败后的回调函数
function(XMLHttpRequest,textStatus,errorThrown){}
* XMLHttpRequest - Ajax的核心对象
* textStatus - 请求状态
* error、timeout及notmodified等
* errorThrown - 错误异常信息
* 封装第二层 - 基于第一层再次封装
* $().load(url,data,callback) - 最简单、局限性最大
* 参数
* url - 设置当前Ajax的请求地址
* data - 设置当前Ajax的请求数据
* 格式要求为key:value,构建Object即可
* callback - Ajax请求成功后的回调函数
* 该回调函数的形参(data),表示服务器端响应的数据内容
* 问题
* 请求类型由是否发送请求数据决定
* 没有发送请求数据时,请求类型为GET
* 如果发送请求数据时,请求类型为POST
* 默认接收服务器端的数据内容
* 是以字符串类型(HTML格式)进行接收
* 无法使用XML格式或JSON格式
* $.get(url,data,callback,type) - 请求类型是GET
* 参数
* url - 设置当前Ajax的请求地址
* data - 设置当前Ajax的请求数据
* 格式要求为key:value,构建Object即可
* callback - Ajax请求成功后的回调函数
* 该回调函数的形参(data),表示服务器端响应的数据内容
* type - 设置服务器端响应数据的格式
* 默认值 - HTML格式
* xml - XML格式
* json - JSON格式
* $.post() - 请求类型是POST
* 使用方式与$.get()方法一致
* 封装第三层 - 特殊用法
* $.getScript() - 动态读取脚本(JavaScript代码)
* $.getJSON() - 接收JSON格式数据
*
PM:
AJAX DAY03:
* jQuery中的Ajax
* 封装第一层 - 类似于原生Ajax的用法
* $.ajax() - 最复杂
* 选项
* url - 请求地址
* type - 请求类型,默认为GET
* async - 是否异步,默认为true
* data - 请求数据,格式为key:value
* dataType - 响应数据格式
* HTML格式
* XML格式
* JSON格式
* success - 请求成功后的回调函数
function(data,textStatus){}
* data - 响应数据内容
* textStatus - success,请求状态
* error - 请求失败后的回调函数
function(XMLHttpRequest,textStatus,errorThrown){}
* XMLHttpRequest - Ajax的核心对象
* textStatus - 请求状态
* error、timeout及notmodified等
* errorThrown - 错误异常信息
* 封装第二层 - 基于第一层再次封装
* $().load(url,data,callback) - 最简单、局限性最大
* 参数
* url - 设置当前Ajax的请求地址
* data - 设置当前Ajax的请求数据
* 格式要求为key:value,构建Object即可
* callback - Ajax请求成功后的回调函数
* 该回调函数的形参(data),表示服务器端响应的数据内容
* 问题
* 请求类型由是否发送请求数据决定
* 没有发送请求数据时,请求类型为GET
* 如果发送请求数据时,请求类型为POST
* 默认接收服务器端的数据内容
* 是以字符串类型(HTML格式)进行接收
* 无法使用XML格式或JSON格式
* $.get(url,data,callback,type) - 请求类型是GET
* 参数
* url - 设置当前Ajax的请求地址
* data - 设置当前Ajax的请求数据
* 格式要求为key:value,构建Object即可
* callback - Ajax请求成功后的回调函数
* 该回调函数的形参(data),表示服务器端响应的数据内容
* type - 设置服务器端响应数据的格式
* 默认值 - HTML格式
* xml - XML格式
* json - JSON格式
* $.post() - 请求类型是POST
* 使用方式与$.get()方法一致
* 封装第三层 - 特殊用法
* $.getScript(url,callback) - 动态读取脚本(JavaScript代码)
* url - 读取脚本的地址(本地或服务器)
* callback - 读取成功后的回调函数
* $.getJSON() - 接收JSON格式数据
* 表单的Ajax异步请求
* 表单的序列化
* serialize()方法
* 返回JSON字符串
* 格式 - {key:value,key:value,..}
* serializeArray()方法
* 返回JSON对象
* 格式 - [obj1,obj2,obj3,...]
* 注意
* 表单元素必须具有name属性值
* jQuery.form插件
* 作用 - 实现表单的异步提交
* 两个核心方法
* ajaxForm()方法
* ajaxSubmit()方法 - 使用Ajax异步提交表单
* 底层机制
* 表单提交机制
* 表单异步提交的方式
* 不再使用submit按钮,而是使用button按钮
* 通过为button按钮绑定click事件
* 表单的序列化
* 表单的异步提交
* (常用)依旧使用submit按钮
* 在<form>元素绑定onsubmit事件
* 在onsubmit事件的处理函数中
* 表单的序列化
* 表单的异步提交
* 阻止表单默认行为(return false)
* 跨域请求 - $.getJSON()方法
* 跨域
* 完全跨域 - IP不同
* http://www.baidu.com
* http://www.tedu.cn
* 跨子域 - IP相同,但端口号不同
* http://127.0.0.1:8888
* http://127.0.0.1:9999
* 域名
* 顶级域名
* http://www.baidu.com
* 二级域名
* http://wenku.baidu.com
* http://www.baidu.com/kongjian
* 万维网协议
* 默认是不允许跨域请求的
* 实现跨域
* Cookie
* 基本内容
* 浏览器的缓存
* 存储在浏览器内存中
* 关闭浏览器(窗口)后,数据会被自动销毁
* 存储在用户电脑硬盘中
* 关闭浏览器(窗口)后,数据不会被销毁
* Cookie(小甜饼)
* 缓存文件 - 一些用户数据存储在此
* 问题
* 用户数据是以明码(明文)来存储的
* Cookie谁都可以读取
* A网站生成的Cookie文件,归属到百度
* 如何操作操作
* 读取Cookie - 将用户名或密码从Cookie读取
* document.cookie
* 写入Cookie - 将用户名或密码写入到Cookie文件
* 格式 - key=value;expires=时间
* document.cookie