Ajax
后端 ————>>>>>一种方式
服务器定义:提供服务的机器
服务器类型
服务类型:文件服务器 /数据库服务器.邮件服务器.web服务器
操作系统:Linux服务器/windows服务器
应用软件:Apache服务器/Nginx服务器/IIS服务器/Tomcat服务器/Node服务器等
服务器软件
文件服务器(安装软件,计算机通过这些软件提供上传下载)
Server-U/FileZilla/VsFTP
数据库服务器
必须安装一些软件,次计算机通过这些软件来提供服务
MySQL/MSSQL
- HTTP服务器(网站)
网页—通过软件—服务器
Apache(阿帕奇服务器).Nginx(PHP/负载平衡),IIS(windows系统自带),Tomcat(JAVA用的服务器),NodeJS
搭建HTTP服务器步骤:
1.安装apache软件
2.服务端的语言 php
3.数据库 Mysqll
客户端
定义:向服务器索取服务能力的终端
前端开发以浏览器为宿主环境
网络基础
HTTP服务器:
1.Ip地址
处于网络环境中,计算机就会自动分配一个Ip地址(唯一)
查看本机ip地址:ping ipconfig ifconfig(Linux)\
2.域名
Ip地址的面具
查看域名对应的I地址
3.DNS服务
DNS记录了IP 地址和域名的映射（对应）关系；
查找优先级 本机hosts文件、DNS服务器
4.端口
一台计算机提供多种服务
查看端口占用情况:netstat-an
80(apache)
3306(Mysql)
集成环境
wampserver 127.0.0.1/xiu/
对服务器软件进行简单的配置
1,放置网页文件的目录,需要配置目录的访问权限
2.配置域名
3,配置虚拟主机
1.修改文件存放路径
修改配置文件 conf—->>httpd.conf里面的
1.DocumentRoot 修改文件上传路径 234#
2.DirectoryRoot(访问权限)—->修改为与上面路径一致
DNS查找规则
当浏览器中输入一个域名后,操作系统会自动去查找此域名对应的IP地址,但是遵循如下查找规则,先查找当前计算机上的hosts文件,如果在此文件中查找到了则使用hosts下的结果,如果查找不到,再去查找DNS服务器
PHP
表单
前端:
<form action="./login.php" method="">
//action属性用来指定后端处理程序 ,默认为当前页面
//method属性用来指定数据的提交方式 可以是get/post方式
input标签里面必须有name值,表单name属性的是用来提供给服务端接收所传递数据而设置的
注意:复选项name值后面跟"[]" ,服务端接受的结果会放到同一个数组中
表单提交的时候.提交的是表单里面的value属性值
后端:
当上传文件是需要设置 enctype="multipart/form-data"，且只能post方式
$_GET接收 get方式的 传值
$_POST接收 post方式的 传值
$_FILES接收文件上传
通过系统函数move_uploaded_file,将上传的文件从临时目录中移走
常用的PHP函数
in_array() 是否在数组中
count() 计算数组长度
array_key_exists ()检测数组中是否存在key
file_get_contents读取文件
…还有很多
客户端+服务端
HTTP协议组成
客户端发出的请求
服务端做出的回应
请求和响应有三部分组成
请求:
(地址栏输入一个地址/form/src/href都可以发出请求)
- 请求行/请求头/请求主体
请求行: 请求方式+请求地址
请求主体:即提交的数据
注意:get方式请求主体为空
响应:
- 状态行/响应头/响应主体
状态行:由状态码+状态信息
响应主体:即服务器返回的内容
Ajax开讲
/* code review 代码审查
XMLHttpRequest是javascript的一个内置对象
向服务器发送异步请求 ,可以实现页面的局部刷新*/
var xhr=new XMLHttpRequest;
// 请求行
xhr.open('get','demo.php');
// 请求头 ,可以设置多个请求头
// 作用:浏览器向服务器汇报情况
// 只需要执行多次即可.一般只需要设置Content-Type即可
xhr.setRequestHeader('Content-Type','text/html');
// key value
// 发送
xhr.send();
xhr.onreadystatechange=function(){
// 响应不是立即返回的
/* 通过一个事件监听,一旦响应发生改变,变化出发这个事件
在发生改变的时候会有一个状态值(2,3,4)
其中4代表响应结束,此时处理相应结果 最有意义*/
if(xhr.readyState==4&&xhr.status==200){
// xhr.responseText响应主体
console.log(xhr.responseText);
// 状态信息
console.log(xhr.statusText);
// 获取所有的相应头
console.log(xhr.getAllResponseHeaders);
// 获取指定头信息
xhr.getResponseHeader('X-Powered-By');
xhr.getResponseHeader('key');
}
}
XML(了解)
xml和html的区别是什么呢?
- xml是存储数据的,并且浏览器有能力解析XML
- html是展示数据的
那么它的语法规则是什么呢?
必须要有一个根元素
工作原理
服务器返回XML给浏览器可以解决复杂数据传输问题
后端语言链接数据库并将需要的数据取出来,转换为xml格式
返回给apache apache再发送给浏览器
如果服务端返回的是一个xml数据,通过xhr.responseXML得到一个dom,便可以提取xml文档中的数据
ctrl+shiift+delete
JSON
eval能将json字符串转换为对象,处理兼容问题
jquery中的ajax
jquery详细配置
$.ajax({}); //可以发送一个异步请求
ajax方法可以传递一个对象参数,对象参数包括若干属性
dataType:’json’
用来约束服务器的返回类型,与响应头里的Content-Type相对应
beforeSend:function(){ //一般用于数据验证
在请求发出前调用次函数,这个函数有一个返回值,如果返回值为return false,则请求停止
}
errot:function(a,b){//当请求(逻辑)失败时,调用此函数}
同源 跨域
安全策略:
浏览器出于安全考虑对请求作出限制
如果非要获取与当前网页域名/协议.端口不同的网站数据,则会跨域
与跨域相对的还有一个名称叫同源
注意:即使跨域,浏览器也是发出请求了,并且服务器作出了响应.
解决跨域:
通过服务器去访问另外一台服务器
1.标签的src和href属性是可以跨域访问的
2.利用src或者href的特点来实现跨域数据的访问
jQuery中使用JSONP
1.jQurey使用$.ajax方法来实现JSONP
2.通过url属性设置JSONP的请求地址
3.无需设置请求方式(JSONP原理是通过src属性发起的请求)
4.在发起请求时,,可以使用data来设置请求参数
5.非常必要的一步,必须设置dataType:’jsonP’
dataType是jQuery内部判断
jsonP是不支持post的
6.通过success得到服务端的响应结果
跨域资源共享
跨域访问数据不可避免,新版本的http制定规则
设置一个响应头可以告知浏览器是不是有必要限制跨域访问
知识点
1.MIME是标识文件类型的，文件后缀并不能正确无误的标识文件的类型。
客户端与服务器在进行数据传输的时候都是以字节形式进行的，咱们可以理解成是以“文本形式”传输，这时浏览器就需要明确知道该怎么样来解析这些文本形式的数据，MIME就是明确告知浏览器该如何来处理。
2.在Javascript中有一个函数叫 eval ,它可以将一个字符串按着 Javascript 的语法进行解析