了解HTTP服务&Ajax编程

时间 2019-12-01

原文原文链接

了解HTTP服务&Ajax编程

1.C/S结构（即Client、Server）javascript

在C/S结构的状况下，不一样的服务须要安装不一样的客户端软件，好比QQ、迅雷、Foxmail。

2．B/S结构（即Broswer、Server）php

解决了C/S所带来的不便，将全部的服务均可以经过浏览器来完成。

B/S架构与C/S架构区别

1．硬件环境不一样 :css

C/S 通常创建在专用的网络上 ,小范围里的网络环境, 局域网之间
B/S 创建在广域网之上的 ,没必要是专门的网络硬件环境，通常只要有操做系统和浏览器就行

2．对安全要求不一样html

C/S 通常面向相对固定的用户群, 对信息安全的控制能力很强. 
B/S 创建在广域网之上, 对安全的控制能力相对弱, 可能面向不可知的用户。

3．软件重用不一样java

C/S 程序能够不可避免的总体性考虑, 构件的重用性不如在B/S要求下的构件的重用性好.

服务器

通俗的讲，可以提供某种服务的机器（计算机）称为服务器。mysql

1：接收用户请求
2：对请求进行处理
3：给用户一个响应。

1.服务器类型jquery

一、按服务类型可分为：文件服务器、数据库服务器、邮件服务器、Web 服务器等；

二、按操做系统可分为：Linux服务器、Windows服务器等；

三、按应用软件可分为 Apache服务器、Nginx 服务器、IIS服务器、Tomcat服务器、Node服务器等。

2.服务器软件git

常见的服务器软件有：github

一、文件服务器：Server-U、FileZilla、VsFTP等；

二、数据库服务器：Oracle、MySQL、PostgreSQL、MSSQL等；

三、邮件服务器：Postfix、Sendmail等；

四、HTTP 服务器：Apache、Nginx、IIS、Tomcat、NodeJS等；

3.HTTP服务器ajax

即网站服务器，主要提供文档(文本、图片、视频、音频)浏览服务，通常安装Apache、Nginx服务器软件。

HTTP服务器能够结合某一编程语言处理业务逻辑，由此进行的开发，一般称之为服务端开发。

常见的运行在服务端的编程语言包括 PHP、Jsp、Asp、Python、Ruby、Perl等。

网络基础

1.IP地址

查看本机IP地址 ping、ipconfig、ifconfig

2.域名查看域名对应的IP地址 ping、tracert

3.DNS服务

DNS记录了 IP 地址和域名的映射（对应）关系；
查找优先级 本机hosts文件、DNS服务器

好比咱们访问http://www.baidu.com ，首先会到本机的hosts文件当中进行相应的查找，没有找到，而后去dns 服务器上面去找.找到对应的ip 地址，根据ip 地址定位到互联网上面的主机，根据端口定位到服务。而后由主机完成响应，通常咱们都是响应一个html 页面，浏览器获得这个页面，解析这个页面，而后一张网页就出如今咱们的面前了。

4.端口

查看端口占用状况 netstat -an
常见端口号 80、8080、330六、2一、22

搭建wamp 介绍

Windows + Apache + Mysql + PHP，首字母组合。集成安装环境，即在window下的apache、php和mysql的服务器软件。

1.安装WampServer
安装wampserver，和普通软件安装无差异，除指定安装路径外，其它默认安装。

2.管理HTTP服务

任务图标绿色为正常启动状态
经过图形控制台能够启动、重启、中止全部服务
Start All Services 
stop All Service 
Restart All Service

注意事项：
一、检查网络是否是通的 ping 对方IP
二、检查防火墙是否开启，若是开启将不能正常被访问
三、检查访问权限 Allow from all
四、理解默认索引
五、确保端口没有被其它程序占用
六、“#”表示注释
七、修改配置要格外当心，禁止无心修改其它内容

5.配置根目录

网站根目录是Web服务器上存放网站程序的空间，可经过修改配置文件自定义，如E:/www

具体步骤以下
一、打开配置文件，控制台选择
或者 wampserver安装目录下
bin\apache\Apache2.2.21\conf\httpd.co

2.设定根目录，查找并修改
DocumentRoot "D:/wamp/www/"

例如：
DocumentRoot "E :/www/"
这样就指定了 "E :/www/"为存放网站的根目录

三、配置根目录，查找
<Directory  "D:/wamp/www/">

四、修改完后，并不能当即生效，须要 重启Apache
注：能够指定任意目录为根目录

5.网站部署
将咱们制做好的网页拷贝到配置好的根目录下，浏览器访问127.0.0.1便可。

6.配置虚拟主机

在一台Web服务器上，咱们能够经过配置虚拟主机，而后分别设定根目录，实现对多个网站的管理。

具体步骤以下：
一、开启虚拟主机辅配置，在httpd.conf 中找到
# Virtual hots
#Include conf/extra/httpd-vhosts.conf
去掉前面的#号注释，开启虚拟主机配置

二、配置虚拟主机，打开conf/extra/httpd-vhosts.conf
分别修改如下三项
DocumentRoot "E:/www/example"
ServerName "example.com "
ServerAlias "www.example.com"
其它项无需指定。

三、修改DNS（hosts）文件
打开C:\Windows\System32\drivers\etc\hosts
目录是固定的
注：修改hosts文件权限

四、重启Apache

五、浏览器访问www.example.com

7.PHP基础

文件以.php后缀结尾，全部程序包含在，避免使用中文目录和中文文件名

例子：
	<?php
		eaho  'hello';
	?>

1.变量
一、变量以$开头 字母/数字/下划线 不能以数字开头
二、大小写敏感（区分大小写）

2.数据类型
字符型、整型、浮点型、布尔型、数组、对象、NULL
单引号&双引号区别
索引数组、关联数组（了解便可）

3.内容输出
echo：输出简单数据类型，如字符串、数值
print_r()：输出复杂数据类型，如数组
var_dump()：输出详细信息，如对象、数组（了解）

4.运算符
基本与Javascript语法一致
. 号表示字符串拼接符，Javascript中为+号

5.函数
与Javascript基本一致,函数名对大小写不敏感,默认参数（了解便可）
/* function sayHello(){
echo 'ahaaha';
}
sayHello();*/
/**
默认参数。
*/
function sayHello($person="小明"){
echo '你好'.$person;
sayHello("小猪");

6.分支、循环语句

//遍历数组
//索引数组遍历
$array=array("1","2","33","44");
//获取到数组的长度。 count() 用来获取php 的数组的长度
$count=count($array);
for($i=0;$i<$count;$i++){
       echo $array[$i];
}

也能够经过foreach 来完成遍历，没遍历一次，都会给$value 赋值。
foreach($array as $value){
    echo $value;
 }
$array=array ("username" =>"zhangsan", "age"=>13 );
foreach($array as $key=>$val){
    echo $key. ":".$val."<br/>" ;

7.表单处理
表单name属性的是用来提供给服务端接收所传递数据而设置的
表单action属性设置接收数据的处理程序
表单method属性设置发送数据的方式
当上传文件是须要设置 enctype="multipart/form-data"，且只能post方式
$_GET接收 get 传值
$_POST接收 post 传值
$_FILES接收文件上传

8.经常使用PHP函数
in_array() 是否在数组中
count() 计算数组长度
array_key_exists()检测数组中是否存在key
file_get_contents读取文件
...还有不少

9.常见协议
一、HTTP、HTTPS 超文本传输协议
二、FTP 文件传输协议
三、SMTP 简单邮件传输协议

HTTP协议是由从客户机到服务器的请求(Request)和从服务器到客户机的响应(Response)进行了约束和规范。即HTTP协议主要由请求和响应构成。
经常使用请求方法 POST、GET、PUT、DELETE

10.请求/请求报文
请求由客户端发起，其规范格式为：请求行、请求头、请求主体。

一、请求行
例子：
post/01.day/code/login.php HTTP/1.1
由请求方式、请求URL和协议版本构成

二、请求头
Host：localhost请求的主机
Cache-Control：max-age=0控制缓存
Accept：*/* 接受的文档MIME类型
User-Agent：很重要
Referer：从哪一个URL跳转过来的
Accept-Encoding：可接受的压缩格式
If-None-Match：记录服务器响应的ETag值，用于控制缓存
此值是由服务器自动生成的
If-Modified-Since：记录服务器响应的Last-Modified值
此值是由服务器自动生成的

三、请求主体
即传递给服务端的数据
注：当以post形式提交表单的时候，请求头里会设置
Content-Type: application/x-www-form-urlencoded，以get形式当不须要

11.响应/响应报文
响应由服务器发出，其规范格式为：状态行、响应头、响应主体。

一、状态行
HTTP/1.1 200 OK
由协议版本号、状态码和状态信息构成

二、响应头
Date：响应时间
Server：服务器信息
Last-Modified：资源最后修改时间
由服务器自动生成
ETag：资源修改后生成的惟一标识
由服务器自动生成
Content-Length：响应主体长度
Content-Type：响应资源的MIME类型

三、响应主体
即服务端返回给客户端的内容；
状态码:常见的有200表明成功、304文档未修改、403没有权限、404未找到、500服务器错误

4.调试工具	
利用HTTP抓包工具在开发中能够帮咱们进行调试，经常使用抓包工具HttpWatch、Fiddler、Charles、FireBug等

5.浏览器插件
Firebug、HttpWatch、chrome dev tools
代理软件
Charles、Fiddler

AjAx编程

1.什么是同步交互
服务器返回的数据会覆盖以前登录的页面覆盖掉。
2.什么异步交互
页面不刷新，就能够可以与服器进行动态的数据交互。
3.XMLHttpRequest
浏览器内建对象，用于在后台与服务器通讯(交换数据)

请求
HTTP请求3个组成部分与XMLHttpRequest方法的对应关系
1.请求行
xhr.open('get','index.php');
2.请求头
xhr.setRequestHeader('Content-Type','text/html')(get请求能够不设置)
三、请求主体
xhr.send(null)

响应
HTTP响应是由服务端发出的，做为客户端更应关心的是响应的结果。

因为服务器作出响应须要时间（好比网速慢等缘由），因此咱们须要监听服务器响应的状态，而后才能进行理。

一、获取状态行（包括状态码&状态信息）
xhr.status;//状态码
xhr.statusText//状态信息
	
二、获取响应头
xhr.getResponseHeader('content-Type')//获取指定信息
xhr.getAllResponseHeaders();

3.响应主体
xhr.responseText;
xhr.responseXML;

API详解

xhr.open() 发起请求，能够是get、post方式

xhr.setRequestHeader() 设置请求头

xhr.send() 发送请求主体get方式使用xhr.send(null)

xhr.onreadystatechange = function () {} 监听响应状态

xhr.readyState = 0时，UNSENT open还没有调用

xhr.readyState = 1时，OPENED open已调用

xhr.readyState = 2时，HEADERS_RECEIVED 接收到头信息

xhr.readyState = 3时，LOADING 接收到响应主体

xhr.readyState = 4时，DONE 响应完成

不用记忆状态，只须要了解有状态变化这个概念

xhr.status表示响应码，如200

xhr.statusText表示响应信息，如OK

xhr.getAllResponseHeaders() 获取所有响应头信息

xhr.getResponseHeader('key') 获取指定头信息

xhr.responseText、xhr.responseXML都表示响应主体

注：GET和POST请求方式的差别

一、GET没有请求主体，使用xhr.send(null)

二、GET能够经过在请求URL上添加请求参数

三、POST能够经过xhr.send('name=itcast&age=10')

四、POST须要设置 
请求头：xhr.setRequestHeader('Content-Type','application/x-www-form-urlen')

五、GET效率更好

六、GET大小限制约4K，POST则没有限制

案例：

<body>
<input type="button" value="xmlHttpRequest 对象测试" id="ajaxId">
<script>
        document.getElementById("ajaxId").onclick=function () {

                    /*
                   	 	* 1:我要建立对象
                     	* 2：跟服务器创建链接
                     	* 3：发送数据
                     	* 4: 接收服务器响应的数据
                    * */
                    //:我要建立对象
                    var xhr=new XMLHttpRequest();
                    /**
                     	* 1:请求提交的方式
                     	* 2：提交的地址
                     */
                    xhr.open("GET","demo01.php");

                    //发送数据.
                    xhr.send("username=zhangyang");

                    /*接收响应的数据.*/
                    /*
                    	* 时刻监听着服务器端状态的改变，服务器在客户端响应的过程中
                    	* 会给客户端不少的状态
                    	* 当服务器在响应的过程中的时候会一直调用这个方法。
                    * */
                    xhr.onreadystatechange=function(){
                            //能够去获取服务器端的状态。
                            /*
                            	* 0,1,2,3,4
                            	* 4:表明服务器已经响应完成，全部数据响应完成
                            	*   alert(xhr.status); 这个是服务器端给客户端的一个状态码
                            	*   200 表明服务器响应式ok
                            * */
                            if(xhr.readyState==4 && xhr.status==200){
                                    //接收数据。
                                  var data=  xhr.responseText;
                                  alert(data);
                            }
                    }

        }
</script>
</body>

JSON解析

JSON数据在不一样语言进行传输时，类型为字符串，不一样的语言各自也都对应有解析方法，须要解析完成后才能读取

1.javascript解析的方法
 	两种方式：直接把json 格式的数据转换成javascript 的对象
	1：eval("("+json+")")	//推荐使用
	2: JSON.parse(json);	//个别地方有兼容问题
示例：
直接把json 格式的数据转换成javascript 的对象
var s1 ='["left':100]';
var a1=JSON.parse(s1)

2.stringify : 能够把一个对象转成对应字符串
var  arr=[1,2,3]=>JSON.stringify (arr);
ar obj={left:100}=>JSON.stringify(obj) ;

php的解析方法

1.json_encode()、json_decode()
总结：JSON体积小、解析方便且高效，在实际开发成为首选。

2.兼容性
IE五、IE6中使用 ActiveObject("Microsoft.XMLHTTP")

案例：
var request;

if(XMLHttpRequest){
   //标准写法
	request= new  XMLHttpRequest;
}else{
	 request= new  ActiveXObject('Microsoft.XMLHTTP	');
}

jQuery中的Ajax

jQuery为咱们提供了更强大的Ajax封装
$.ajax({}) 可配置方式发起Ajax请求
$.get() 以GET方式发起Ajax请求
$.post() 以POST方式发起Ajax请求
$('form').serialize() 序列化表单（即格式化key=val&key=val）
url 接口地址
type 请求方式
timeout 请求超时
dataType 服务器返回格式
data 发送请求数据
beforeSend: function () {} 请求发起前调用
success 成功响应后调用
error 错误响应时调用
complete 响应完成时调用（包括成功和失败）

###案例### 1.使用ajax方法发送请求 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery.min.js"></script>

</head>
<body>
<input type="button" id="ajaxId" value="ajax 方法">
<script>
        document.getElementById("ajaxId").onclick=function(){
                //使用ajax 方法来发送请求。

                //$ 这个是jQuery 对象， ajax 方法是上面的一个方法。
                //这个里面接收的是一个对象。
                $.ajax({
                    /*各类参数*/
                    url:"01ajax.php",//请求的资源的 地址
                    type:"GET",//请求提交的方式。
                    /*
                    	* 服务器端3秒尚未给我响应，我就断开这个链接
                    	* */
                    timeout:3000,
                    //第一种写法
                    /*data:"username=zhangsan&password=123456",//请求的数据,*/
                    /*第二种写法*/
                      data:{
                            "username":"zhangsan",
                            "password":"123456"
                      },
                    /*
                    	* data:这个data 就是服务端返回的数据。
                    	* */
                    success:function(data){
                          alert(data);
                    },
                    //出错了会自动调用这个函数。
                    error:function(){
                         alert("服务器开了点小差哦");
                    },
                    /*请求处理完成了以后会调用这个方法*/
                    complete:function(){
                          alert("跟服务器的交互已经完成。");
                    },
                    /*
                   	 * 在请求发送以前调用。
                   	* */
                    beforeSend:function(){
                          /*
                          	* 我发送请求给服务器，我是要发送一些数据给服务器，
                          	* 为了减小跟服务器的交互，在发送以前，对请求的数据进行一些校验
                          	* 若是校验失败，我不请求服务器了。
                          *
                          	* */
                         /*alert("请求发送以前调用");*/
                         //我在界面上面获取了一个手机号
                         /*var tel="1362093411";

                         if(tel.length!=11){
                             //走这里代码。
                             //我在这里应该给用提示，而后中止发送请求
                             //就直接不会发送请求。
                             alert("您输入的数据有误。");
                             return false;
                         }*/

                    }
                });
        }

</script>
</body>
</html>

2.使用get发送请求
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <input type="button" id="getId" value="get 方法">

    <script>
            $("#getId").on("click",function(){

                    /*
                    * 1:url 请求地址
                    * 2：data ,"",
                    * 3: function  回掉函数  默认就是get 方式提交
                    *
                    *
                    * */

                         $.get("02get.php", {"username":""},
                                  function(data){
                                           alert(data);
                                  });

            });
    </script>
</body>
</html>

3.使用post发送请求		
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<input type="button" id="postId" value="post 方法">

<script>
    $("#postId").on("click",function(){

        /*
         * 1:url 请求地址
         * 2：data ,"",
         * 3: function  回掉函数  默认就是get 方式提交
         *
         *
         * */

        $.post("03post.php", {"username":""},
                function(data){
                    var obj=eval("("+data+")")
                    alert(obj.sex);
                });

    });
</script>
</body>
</html>
	
4.使用load方法发送请求	
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<div>我睡觉了.</div>
<input type="button" id="loadId" value="load 方法">

<script>
    $("#loadId").on("click",function(){
            /*
            * 加载一个资源
            * 返回的数据会会加载到当前元素里面，会把当前元素里面的内容覆盖。
            * 我不知道是get 方式提交，仍是post 方式提交。
            * 若是发送了参数给服务器，就使用post 方式提交，不然就使用get 方式提交
            *
            * */
            $("div").load("04load.php",{"username":"zhangsan"},function(){
                    alert("回调");
            });


    });
</script>
</body>
</html>	
	
5.getJSON方法发送请求，要求返回数据必定是json格式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<div>我睡觉了.</div>
<input type="button" id="JSONId" value="JSON 方法">

<script>
    $("#JSONId").on("click",function(){
                /*
                * getJSON 要求服务器端返回的数据必定是json 格式的数据
                *
                * */
                $.getJSON("05getJSON.php",function(info){
                        //返回的字符串，我还须要使用js 手动给字符串转一下。
                      console.log(info);
                })



    });
</script>
</body>
</html>		

6.getscript方法，获取远程的一段脚本	
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<div>我睡觉了.</div>
<input type="button" id="scriptId" value="script 方法">

<script>
    /*
    * 获取远程的一段脚本
    *
    * */
    $("#scriptId").on("click",function(){
                 $.getScript("06getScript.js");
    });

</script>
</body>
</html>

模板引擎

解决的问题：
咱们ajax 与服务器在交互过程中的数据解析问题
咱们经过xmlHttpRequest 发送一个请求给服务器，服务器接收到请求，对请求进行数据，给客户端返回数据，xmlHttpRequest 对象接收到数据，而后须要解析这些，解析完这些数据以后，而后要组拼不少的html 代码，而后写到页面上面去。在这个过程中，咱们服务器端返回的数据，而后组拼字符串的时候特别容易出现问题。咱们的流行模板引擎就是用来干这件事的。

流行模板引擎

BaiduTemplate：http://tangram.baidu.com/BaiduTemplate/
(百度)
ArtTemplate：https://github.com/aui/artTemplate
(腾讯)
velocity.js：https://github.com/shepherdwind/velocity.js/
（阿里）
Handlebars：http://handlebarsjs.com/
（国外的）
success:http://blog.jobbole.com/56689/

artTemplate

一、引入template-native.js
二、<% 与  %> 符号包裹起来的语句则为模板的逻辑表达式
三、<%= content %>为输出表达式

案例：		
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
         模板是用来干什么
         1：服务器返回不少的json 格式的数据
         2：咱们解析这些数据
         3：咱们须要把这些数据组拼成html
         4：而后写到页面。
         <%%>  写逻辑的，<%=%> 输出的

-->
<!--使用腾讯的模板，咱们须要导入这样的一个js 库。-->
<!--
                       输出。
                -->

<script id="test" type="text/template">
      <%for(var i=0;i<list.length;i++){%>
            <li>
                 <%=list[i]%>
            </li>
      <%}%>
</script>

<!--
    我如今导入的是这个js 库
-->
<script src="js/template-native.js"></script>



</head>
<body>
    <ul>


    </ul>
    <script>
        //我发送了一个请求给服务器，发送请求给服务器以后，服务器返回数据，返回的是json 格式的数据
       /* var data = {
            title: '标签',
            list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
        };*/
        //解析这些数据，而后组拼html
        //js css,html 标签均可以js 里面，动态建立，
        //这个方法是模板提供的 ,讲模板跟数据进行绑定，经过template 绑定
        //接下来这个方法返回的时候一个字符串，一个html 的字符串。
        var info=['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'];

        var data={
             list:info
        }

        var html=template("test",data);
        /*
            * 1:准备模板
            * 2：数据 （服务器）
            * 3：使用template 将 数据跟模板进行绑定
            * */
        var data=["","",""];

        document.querySelector("ul").innerHTML=html;
    </script>
</body>
</html>

同源&跨域

1.同源同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口彻底相同。

2.跨域

不一样源则跨域
http://api.example.com/detail.html		不一样源	域名不一样

https//www.example.com/detail.html		不一样源	协议不一样

http://www.example.com:8080/detail.html	不一样源	端口不一样

http://api.example.com:8080/detail.html	不一样源	域名、端口不一样

https://api.example.com/detail.html		不一样源	协议、域名不一样

https://www.example.com:8080/detail.html不一样源	端口、协议不一样

http://www.example.com/detail/index.html同源		只是目录不一样

跨域方案
一、顶级域名相同的能够经过domain.name来解决，即同时设置 domain.name = 顶级域名（如example.com）

二、document.domain + iframe

三、window.name + iframe

四、location.hash + iframe

五、window.postMessage()

参考网址：http://rickgray.me/2015/09/03/solutions-to-cross-domain-in-browser.html

3.JSONP

1.原理剖析

其本质是利用了<script src=""></script>标签具备可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，而且将服务器数据以该函数参数的形式传递过来，此方法须要先后端配合完成。

2.jQuery中的JSONP	

jQuery 的$.ajax() 方法当中集成了JSONP的实现，能够很是方便的实现跨域数据的访问。

dataType: 'jsonp' 设置dataType值为jsonp即开启跨域访问

jsonp 能够指定服务端接收的参数的“key”值，默认为callback

jsonpCallback 能够指定相应的回调函数，默认自动生成