xammp和ajax

一、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为主界面,默认跳转,可以省略
                             如果是请求的为服务端地址,由服务端进行处理以后再来展示内容,只会帮你展示服务端语言中的输出内容

 

二、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协议的基础上以异步的方式与服务器进行通信

       2.1 ajax优点

​        ajax别称  叫做无刷新技术 比如地图、局部加载
​        1.页面局部刷新。在读取数据的过程中,用户所面对的不是白屏,而是原来页面的转台,或者正在更新的信息提示状态,只有当接收到全部数据后才更新相应部分的内容,而这种更新也是瞬间的用户几乎感觉不到
​        2.可以充分利用客户端闲置的处理能力,减轻服务器和网路传输的负担
​        3.使web中界面与应用相分离  也可以说是数据与呈现相分离

       2.2、ajax处理网络请求
                     Ajax模块在处理网络请求的时候包括以下四个步骤:
​                           1.通过XMLHttpRequest类创建xhr对象
​                           2.为xhr对象添加属性与回调方法
​                           3.令xhr对象执行open()方法,指明请求被发往某处
​                           4.令xhr对象执行send()方法发出请求。(Ajax可以发出同步请求,也可以发出异步请求。但大多数情况下指的是异步请求,因为同步的Ajax请求对浏览器会产生“阻塞效应”。)

                           XMLHttpRequest对象用来在【浏览器】与【服务器】之间传送数据。 通俗上来说将此对象称为request请求对象、请求对象或请求。

               2.3、xhr对象发送GET、POST请求
                      ```JS
                      //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();
                         ```

2.4 请求头格式

| 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协议、                        |

三、 请求参数

3.1GET参数
           get传参直接在url上进行拼接 


3.2POST参数
            post传参的时候将参数放入send里面进行传参

           注意:填入参数时对大小写敏感,要么全大写要么全小写。

四、JSON 常用方法

​        JSON:JavaScript 对象表示法(JavaScript Object Notation)。是存储和交换文本信息的语法。类似 XML。但是比     XML 更小、更快,更易解析。
​        JSON.parse   将JSON对象  ---> JS对象
​        JSON.stringfy 将js对象  ---->  JSON对象 又叫JSON字符串

五、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。从技术上来说这样省略后的网页地址实际上是一个不同的网页地址,浏览器本身无法决定这个新地址是否通,服务器必须完成重定向的任务。

上一篇:一个Ajax的Dome


下一篇:原生 ajax 详细讲解