1、xammp
简介：集成apache服务器，MySQL数据库，php后端语言，集成的软件
文件打开方式：
1.双击，通过file协议，本地打开 以后禁止，会出现跨域问题
file:///C:/Users/admin/Desktop/0928/01-%E8%AF%BE%E5%A0%82%E8%B5%84%E6%96%99/01.html
2.通过http或者https请求的方式进行打开
http://localhost:8888/01-%e8%af%be%e5%a0%82%e8%b5%84%e6%96%99/01.html
xampp服务存放路径：xammp安装目录中的htdocs文件夹、
启动apache服务器：443：https协议默认端口80http协议的默认端口
浏览器输入：ip地址（localhost/127.0.0.1）：端口号
http是默认的可以省略，443端口和80端口时可以省略的，index.html为主界面，默认跳转，可以省略
浏览器开发者工具中network选项存放了所有的王阔请求
浏览器只能解析jtml文件，其他文件类型无法解析，原封不动进行展示
如果是请求的为服务端地址，由服务端进行处理以后再来展示内容，只会帮你展示服务端语言中的输出内容
2、ajax简介
ajax (Asynchronous Javascript And XML)其实就是异步的javaScript和XML。
XML：<html>这是html标签，XML格式是一样的 可以自定义<name> <age> 满足标记语言的格式就可以了。
AJAX不是一门新语言，是综合HTTP异步通信 、JS、XML、以及JSON等多种网络技术的一种编程模型。
AJAX ~= JS+ xml+JSON + HTTP通信，本质就是在HTTP协议的基础上以异步的方式与服务器进行通信。
3、ajax优点
ajax别称 叫做无刷新技术 比如地图、局部加载 1.页面局部刷新。在读取数据的过程中，用户所面对的不是白屏，而是原来页面的转台，或者正在更新的信息提示状态，只有当接收到全部数据后才更新相应部分的内容，而这种更新也是瞬间的用户几乎感觉不到 2.可以充分利用客户端闲置的处理能力，减轻服务器和网路传输的负担 3.使web中界面与应用相分离 也可以说是数据与呈现相分离
4、ajax处理网络请求
Ajax模块在处理网络请求的时候包括以下四个步骤
1.通过XMLHttpRequest类创建xhr对象 2.为xhr对象添加属性与回调方法 3.令xhr对象执行open()方法，指明请求被发往某处 4.令xhr对象执行send()方法，发出请求。
补充：Ajax可以发出同步请求，也可以发出异步请求。但大多数情况下指的是异步请求，因为同步的Ajax请求对浏览器会产生“阻塞效应”。
【Ajax发送请求】这件事情并不是一句话带过就可以的，在Ajax中对整个请求从创建到发送都有着一套严格的标准流程。就好像车间生产产品，流水线上每一个步骤的操作完毕之后才能打包出售。
说明：XMLHttpRequest对象用来在【浏览器】与【服务器】之间传送数据。 通俗上来说将此对象称为request请求对象、请求对象或请求。
5、xhr对象发送GET、POST请求
//1.创建对象
var xhr;
if (window.XMLHttpRequest){//普通浏览器
xhr=new XMLHttpRequest();
}else{//老版本IE
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//3.监听服务器响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText);//将接收到的服务器数据显示到控制台中
}
};
//2.打开链接
xhr.open("请求方式","请求地址",是否异步:默认为异步true);
//3.5 请求头（POST请求时设置）
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//4.发送请求
xhr.send();
5.1 请求头格式
| Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8 | 表示客户端可以接受的内容类型,多个值使用;分号隔开q=0.9 表示权重优先级,/表示可以接受任意类型内容; |
|---|---|
| Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3 | 表示客户端可以接受的语言 |
| User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Win64x64; | 浏览器信息,例如使用的是网井的内核, windows64位系统; |
| Accept-Encoding: gzip, deflate | 支持的压缩格式 |
| Host: localhost:8888 | 访问地址 |
| Connection: keep-alive | 保持连接 和HTTP1.1版本有关,默认保持3s |
| Content-Type: application/x-www-form-urlencoded | 表单提交时才有可能出现,表示表单的数据类型,使用url编码,url编码 % 16位数 |
| Content-Length: 7 | post请求 请求体长度 |
| Upgrade-Insecure-Requests: 1 | 告诉服务器，浏览器可以处理https协议、 |
5.2 请求参数
5.2.1 GET参数
get传参直接在url上进行拼接
5.2.2 POST参数
post传参的时候将参数放入send里面进行传参
注意：**填入参数时对大小写敏感，要么全大写要么全小写。
5.3 JSON 常用方法
JSON：JavaScript 对象表示法（JavaScript Object Notation）。是存储和交换文本信息的语法。类似 XML。但是比 XML 更小、更快，更易解析。
JSON.parse 将JSON对象 ----》 JS对象 JSON.stringfy 将js对象 ----》 JSON对象 又叫JSON字符串
6、URL
超文本传输协议（HTTP）的统一资源定位符将从因特网获取信息的五个基本元素包括在一个简单的地址中：
-
传送协议。
-
层级URL标记符号(为[//],固定不变)
-
访问资源需要的凭证信息（可省略）
-
服务器。（通常为域名，有时为IP地址）
-
端口号。（以数字方式表示，若为HTTP的默认值“:80”可省略443是HTTPS协议可以省略）
-
路径。（以“/”字符区别路径中的每一个目录名称 为index.html时可以省略）
-
查询。（GET模式的窗体参数，以“?”字符为起点，每个参数以“&”隔开，再以“=”分开参数名称与数据，通常以UTF8的URL编码，避开字符冲突的问题）
-
片段。以“#”字符为起点
以http://www.luffycity.com:80/news/index.html?id=250&page=1 为例, 其中：
http，是协议； www.luffycity.com，是服务器； 80，是服务器上的默认网络端口号，默认不显示； /news/index.html，是路径（URI：直接定位到对应的资源）； ?id=250&page=1，是查询。 大多数网页浏览器不要求用户输入网页中“http://”的部分，因为绝大多数网页内容是超文本传输协议文件。同样，“80”是超文本传输协议文件的常用端口号，因此一般也不必写明。一般来说用户只要键入统一资源定位符的一部分（www.luffycity.com:80/news/index.html?id=250&page=1）就可以了。
注意：由于超文本传输协议允许服务器将浏览器重定向到另一个网页地址，因此许多服务器允许用户省略网页地址中的部分，比如 www。从技术上来说这样省略后的网页地址实际上是一个不同的网页地址，浏览器本身无法决定这个新地址是否通，服务器必须完成重定向的任务。
7、xhr对象的常用属性与方法（参考）
7.1 onreadystatechange
描述：onreadystatechange属性指向一个回调函数。当页面的加载状态发生改变的时候readyState属性就会跟随发生变化，而这时readystatechange属性所对应的回调函数就会自动被调用。 语法：xhr.onreadystatechange = function(){};
7.2 readyState
描述：是一个只读属性，用一个整数和对应的常量来表示XMLHttpRequest请求当前所处的状态一般会在onreadystatechange事件的回调函数中，通过判断readyState属性的值，进而执行不同状态对应的函数。 语法：xhr.onreadystatechange = function(){ if(xhr.readyState == n){ // 执行对应的函数 } }
说明：
值为0,对应常量UNSENT 表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。 值为1,对应常量OPENED 表示send()方法还没有被调用，仍然可以使用setRequestHeader() 设定HTTP请求头 值为2,对应常量HEADERS_RECEIVED 表示send()方法已经执行，并且头信息和状态码已经收到。 值为3,对应常量LOADING 表示正在接收服务器传来的body部分的数据，如果responseType属性 是text或者空字符串，responseText就会包含已经收到的部分信息。
值为4,对应常量DONE，表示服务器数据已经完全接收，或者本次接收已经失败了
7.3 status
描述：表示本次请求所得到的HTTP状态码，它是一个整数。 语法：if(xhr.readyState == n){ if(xhr.status == 200){ //通信成功 } } 说明： a.本属性是只读属性。 b.本属性有以下可能值： 200, OK，访问正常 301, Moved Permanently，永久移动 302, Move temporarily，暂时移动 304, Not Modified，未修改 307, Temporary Redirect，暂时重定向 401, Unauthorized，未授权 403, Forbidden，禁止访问 404, Not Found，未发现指定网址 500, Internal Server Error，服务器发生错误
补充：补充：一般来说认为200就是通信成功的标志。
7.4 statusText
描述： 表示服务器发送的状态提示，是一个只读字符串。 语法：xhr.statusText 说明：不同于status属性，该属性返回状态码所对应的状态信息。 比如OK
7.5 responseText
描述：返回从服务器接收到的字符串内容，该属性为只读。 如果本次请求没有成功或者数据不完整，该属性就会等于null。 如果服务器返回的数据格式是JSON，就可以使用responseText属性来进行数据解析。 语法：xhr.responseText
7.6 open()
描述：表示要将请求发往某处，只是设置而不是真的发送。 语法：xhr.open(‘请求类型’，’url地址’，是否异步); 说明： 第一个参数用来设置get/post请求 第二个参数用来设置请求发送到的url地址 第三个参数是布尔值用来设置是否异步发送，默认false表示同步。 补充： 目前因为我们的页面都采用localhost方式在本地主机直接访问， 因此url直接写出php文件的相对路径即可,会做路径拼接。 而如果通过其他方式打开可能会引起js的跨域问题，就会报错。 而这并不是今天的内容。
7.7 setRequestHeader()
描述：用于设置HTTP头信息。 语法：xhr.setRequestHeader(‘key’，’value’); 说明： 本方法必须在open()之后、send()之前被调用 本方法用来设置在请求发送时，一并被发送出的一些补充信息
7.8 send()
描述：用于实际发出HTTP请求。 语法：xhr.send(formData); 说明：send()方法的参数是表单数据，为post请求准备。 如果是get请求则参数直接写null即可。
415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
