导图社区 AJAX
5天快速入门ajax知识大纲,包括客户端与服务器、网络相关概念、通信协议、服务器环境的安装、PHP基础语法等等。
编辑于2022-07-11 11:55:26AJAX
AJAX第一天
初始AJAX
url地址
展示网页
提供数据
局部刷新
避免整个界面刷新,加载更快、省流量
异步刷新
不影响当前界面现有的操作
客户端与服务器
服务器就是提供服务的
网页服务
文件上传下载
邮件
...
客户端
访问服务器的服务
个人电脑
个人手机
PAD等个人终端
网络相关概念
IP地址
用来标识查找某一台计算机
ipconfig
ifconfig
ipv4和ipv6
端口
一台电脑上可能提供多种服务,可以用端口进行区分
80端口(默认)
网站服务
21端口
文件上传下载
22/23端口
telnet远程连接
计算机支持65536个端口
1024之下的端口系统使用
自定义端口一般在1024之上
域名
ip地址太难记了,使用域名来进行记忆
baidu.com
qq.com
DNS
域名解析服务器
根据域名查询到IP地址
在浏览器中输入www.baidu.com的流程
浏览器先在本地查找对应关系
windows/system32/drivers/etc/HOSTS
DNS服务器查找对应关系
通信协议
事先规定的规则
HTTP/HTTPS
超文本传输协议(HTTP,HyperText Transfer Protocol)
FTP文件传输协议
SSH安全外壳协议
DHCP动态主机分配协议
SMTP(Simple Mail Transfer Protocol )简单邮件传输协议
服务器环境的安装
为啥安装wamp?
让我们的网页以服务的形式提供给别人查看
wamp
windows
apache
mysql
php
lamp
配置(更改配置文件之前最好先备份)
允许别人通过ip地址访问
Allow from all
更改网站根路径
DocumentRoot
虚拟主机的配置
虚拟主题配置的场景?
一台服务器拥有多个站点
网站
静态网站
维护性差
与用户没有交互性
动态网站
模板+动态填充的数据
PHP基础语法
echo:输出内容
echo 输出字符串
print_r 输出复杂类型
var_dump 输出复杂类型
变量声明:$
变量的使用:$
字符串拼接:.
数组
一维数组
$arr = array(1,2,3); $arr = array("hello","world");
下标索引默认是数字,从0开始
下标索引可以自定义 $arrNew = array("username" => "zhangsan","age" => "18" ); echo $arrNew["username"];
二维数组
一维数组的某一个元素还是个数组
数组遍历
普通for循环
foreach
函数
自定义函数
function声明
变量记得加$符号
和js类似
系统函数
print_r
var_dump
json_encode:将数组变为json格式的字符串
AJAX第二天
预定义变量
$_GET
get请求
$ _POST
post请求
使用AJAX来实现局部刷新
创建XMLHttpRequest对象
兼容处理
准备发送
请求方式
get
参数在url后面
参数中如果带有中文,则使用encodeURI进行地址转码
post
参数在send方法中
不需要使用encodeURI转码
必须使用header设置编码
请求地址
同步或者异步
true是异步(默认)
false是同步
执行发送动作
get
send方法中要传null
post
指定回调函数
获取数据
xhr.readyState
readyState=0表示xhr对象创建完成
readyState=1表示已经发送了请求
readyState=2 浏览器已经收到了服务器响应的数据
readyState=3 正在解析数据
readyState=4 数据已经解析完成,可以使用了,一般我们只关心这个值
xhr.status
http的常见状态码
200表示响应成功
404没有找到请求的资源
500服务器端错误
xhr.responseText/xhr.responseXML
同步与异步的理解
js是单线程的
浏览器不是单线程的
Http请求线程
事件队列
事件队列中的任务执行的条件
主线程已经空闲
任务满足触发条件
定时函数(延时时间已经达到)
事件函数(特定事件被触发)
ajax的回调函数(服务器端有数据响应)
AJAX第三天
数据格式
XML数据格式
标签包裹数据
头声明
标签必须成对出现,标签名称可以自定义
缺点
元数据占用的数据量比较大,不利于大量数据的网络传输
元数据:表述数据的数据
解析不太方便
解析XML
xhr.responseXML
使用dom解析
getElementsByTagName
childNodes
children
nodeType
得到节点类型
innerHTML
获取文本内容
使用php开发xml数据格式的接口
要设置header
header("Content-Type:text/xml;");//这里设置响应头信息,保证浏览器可以把相应内容识别为xml文件类型
JSON数据格式
JSON 最常见的用法之一,是从 web 服务器上读取 JSON 数据(作为文件或作为 HttpRequest),将 JSON 数据转换为 JavaScript 对象,然后在网页中使用该数据。
键值对的形式,和js中的对象很类似
json 数据中的键必须用双引号包括
json比 xml更小、更快,更易解析
解析
将字符串变成一个对象之后,直接通过对象点属性的方式就可以获取到我们需要的值了,比解析xml要简单很多
xhr.responseText
JSON.parse
将json形式的字符串转化成对象
JSON.stringify
将对象转化成字符串
使用php开发json数据格式的接口
json_encode
将php中的数组转化成json格式的数据
AJAX的封装
封装需要考虑的事情
什么是变的
什么是不变的
如何通知调用者
如何调用起来方便
封装优化
JQuery中对于AJAX的封装
$.ajax({})传入对象
对象中
type
get
post
url
请求地址
data
请求参数,也可以是一个对象
dataType
json
text
xml
jsonp
success
成功之后的回调
error
失败之后的回调
AJAX第四天
跨域
Ajax发送的请求是有限制的
同源策略
解决方案
jsonp
本质:script引入外部文件,这个文件的内容就是一个方法调用
静态script标签
script标签中的src属性
同步加载
异步加载
动态script标签
document.createElement("script");
指定src属性
加到head标签中
由服务器返回一个函数调用
函数名称通过url参数确定
key值必须和后端约定好
自己实现jsonp的封装
jsonp只支持get
创建script标签
配置script标签的src属性
传递jsonp
传递jsonpCallback
给window增加一个方法,方法的名称就是jsonpCallback的值
使用jQuery实现跨域
dataType:jsonp
jsonp:"cb"
jsonpCallback:"hello"
AJAX第五天
模板引擎的使用
模板+数据==>HTML片段
artTemplate
1、定义模板
type
id
模板中的内容
标签
语法控制
{{}}
if
each
#
2、使用
template(模板id,数据)
小技巧:有时候需要对数据加工之后再传递给模板
第三方平台的使用
www.mob.com
使用步骤
申请账号
申请appkey
参照文档
获取数据的几种场景
前端界面获取自己服务器的数据
前端界面获取别人服务器的数据,别人服务器返回的是jsonp格式数据
前端界面获取别人服务器的数据,别人服务器返回的是json格式数据
使用自己的服务器做中转