http服务&ajax编程

时间 2019-11-17

标签 http 服务 ajax 编程栏目 HTTP/TCP 繁體版

原文原文链接

http服务&ajax编程

一、服务器

前言：通俗的讲，可以提供某种服务的机器（计算机）称为服务器javascript

1.一、服务器类型

按照不一样的划分标准，服务可划分为如下类型：php

按服务类型可分为：文件服务器、数据库服务器、邮件服务器、Web服务器等；
按操做系统可分为：Linux服务器、Windows服务器等；
按应用软件可分为 Apache服务器、Nginx 服务器、IIS服务器、Tomcat服务器、
weblogic服务器、WebSphere服务器、boss服务器、 Node服务器等；

1.二、服务器软件

使计算机具有提供某种服务能力的应用软件，称为服务器软件，
经过安装相应的服务软件，而后进行配置后就可使计算具有了提供某种服务的能力。html

常见的服务器软件有：前端

文件服务器：Server-U、FileZilla、VsFTP等（FTP是File Transfer Protocol文件传输协议）；
数据库服务器：oracle、mysql、SQL server、DB二、ACCESS等；
邮件服务器：Postfix、Sendmail等；
HTTP服务器：Apache、Nginx、IIS、Tomcat、NodeJS等；

1.三、HTTP服务器

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

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

常见的运行在服务端的编程语言包括 php、java、.net、Python、Ruby、Perl等。jquery

二、客户端

具备向服务器索取服务能力的终端，如好比手机、电脑等，经过安装不一样的客户端软件，
能够获取不一样的服务，好比经过QQ得到即时通信服务、经过迅雷得到下载服务等。linux

常见的客户端软件：浏览器、QQ、迅雷、Foxmail等。git

以浏览器为宿主环境，结合 HTML、CSS、Javascript等技术，而进行的一系列开发，一般称之为前端开发。github

三、网络基础

3.1 IP地址

所谓IP地址就是给每一个链接在互联网上的主机分配的一个32位地址。(就像每部手机能正常通话须要一个号码同样)

查看本机IP地址 ping、ipconfig、ifconfig（linux）

3.二、域名

因为IP地址基于数字，不方便记忆，因而便用域名来代替IP地址，域名是一个IP地址的“面具”

查看域名对应的IP地址 ping

3.三、DNS服务

DNS（Domain Name System）因特网上做为域名和IP地址相互映射的一个分布式数据库，
可以使用户更方便的访问互联网，而不用去记住可以被机器直接读取的IP数串。

简单的说就是记录IP地址和域名之间对应关系的服务。

查找优先级本机hosts文件、DNS服务器

ipconfig /flushdns 刷新DNS

3.四、端口

端口号是计算机与外界通信交流的出口，每一个端口对应不一样的服务。

现实生活中，银行不一样的窗口办理不一样的业务。

查看端口占用状况 netstat -an

常见端口号 80、8080、330六、2一、22

四、软件架构

4.一、C/S结构

即Client、Server

C/S工做流程图

在C/S结构的状况下，不一样的服务须要安装不一样的客户端软件，

好比QQ、迅雷、Foxmail这种状况下安装的软件会愈来愈多，同时也有许多弊端，

好比A出差，须要在B电脑上查收邮件，可是B电脑并未安装Foxmail等相似的客户端软件，

这样不得不先去下载Foxmail，很是不方便。

4.二、B/S结构

B/S（即Broswer、Server）解决了C/S所带来的不便，

将全部的服务均可以经过浏览器来完成（由于基本全部浏览器都安装了浏览器），

但B/S也有一些不利，好比操做稳定性、流畅度等方面相对较弱。

五、搭建HTTP服务

Windows + Apache + Mysql + PHP，首字母组合。

5.1 安装WampServer

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

5.2 管理HTTP服务

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

或者单独启动、重启、中止特定服务

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

5.3 配置根目录

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

具体步骤以下：
一、打开配置文件，控制台选择

或者 wampserver安装目录下bin\apache\Apache2.2.21\conf\httpd.conf

二、设定根目录，查找并修改

例如：

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

三、配置根目录，查找

修改为

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

5.4 网站部署

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

5.5配置虚拟主机

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

具体步骤以下：

一、开启虚拟主机辅配置，在httpd.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

六、PHP基础

文件以.php后缀结尾，全部程序包含在<?php ** 这里是代码 ** ?>
避免使用中文目录和中文文件名
php页面没法直接打开须要运行在服务器环境当中

6.一、最简单的php程序

<?php
    // 用来指定编码集
    header('Content-Type:text/html; charset=utf-8');
    /*这是一个最简单的php程序*/
    echo 'hello world!';
?>

6.三、变量

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

// 声明一个变量$a并赋值为10
    $a = 10;
    // 输出一个变量$a
    echo $a;
    // 声明一个变量$b并赋值为10
    $b = 10;
    // 输出一个变量$b
    echo $b;
    
    // 输出顺序是自上向下的
    // 至关于 js dcoument.write()

6.三、数据类型

字符型

$str = 'hello world!';

整型

$num = 10;

浮点型

$float = 10.5;

布尔型

$bool = true;

数组

// Javascript 数组定义方式 var arr = [1, 2, 3]
    // arr[0]、arr[1]、arr[1]
    
    // PHP 是这样定义数组的
    // 这种方式叫作**索引数组**
    $arr = array(1, 2, 3);  
    
    // echo $arr[0];
    // echo $arr[2];
    
    // 定义方式和Javascript有区别，可是访问方式是同样的

// var obj = {name: itcast, age: 10}
    
    // PHP另外一种定定数组的方式，所表达的意义和Javascript同样，
    // 只是语法格式不同
    // 这种方式叫作**关联数组**
    $arr1 = array('name'=>'itcast', 'age'=>10);

    // echo $arr1['name'];
    // echo $arr1['age'];

对象

// Javascript var obj = {name: itcast, age: 10}
    // PHP须要先建立一个类，下面就是建立过程
    class Person {
        public $name = 'itcast';

        public $age = 10;
    }

    $person = new Person;

    // PHP访问一个对象属性的语法是不同的
    echo $person->name;

    // obj['name']; obj.name 不行

NULL

//PHP中一种特殊的数据类型，表示空值，即表示没有为该变量设置任何值null(空值)不区分大小写，null和NULL是同样的。

单引号&双引号区别： 单引号内部的变量不会执行双引号会执行

$name = '小明';

    echo 'name is $name';//输出 name is $name
    echo '<br>';
    echo "name is $name";//输出 name is 小明

索引数组、关联数组（了解便可）

6.四、运算符&内容输出

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

echo：输出简单数据类型，如字符串、数值

/**
    * 链接符
    * Javascript中用+号表示链接符
    * PHP中使用.点号
    */
    
    $hello = 'hello';
    
    $world = 'world!';
    
    // PHP链接符用.号
    echo $hello . ' ' .$world;

print_r()：输出复杂数据类型，如数组

$arr = array('itcast', '今年', '10岁了');
    
    // 只能输出简单类型
    echo $arr;

    // 能够打印数组，可是输出的是一个数组的结构
    print_r($arr);

var_dump()：输出详细信息，如对象、数组（了解）

$arr = array('itcast', '今年', '10岁了');
    
    // 只能输出简单类型
    echo $arr;

    // 输出详细信息
    var_dump($arr);
    
    $hello = 'hello';
    // 输出详细信息
    var_dump($hello);

6.五、函数

基本与Javascript基本一致

函数名对大小写不敏感
默认参数（了解便可）

// 一、PHP中函数不能够省略参数
    // 二、PHP能够设置默认参数
    
    function sayHello($name='web developer') {
        echo $name . '你好!';
    }

    sayHello();

6.六、分支，循环语句

/**
     * 分支控制语句、循环语句
     * 与Javascript同样
     * foreach 数组遍历函数，相似Javascript中的 for in
     */
     $name = 'itcast1';
 
     if($name == 'itcast') {
        echo '我已经在' . $name . '学习';
     } else {
        echo '我尚未学习过编程';
     }

/**
     * 分支控制语句、循环语句
     * 与Javascript同样
     * foreach 数组遍历函数，相似Javascript中的 for in
     */
    // 索引数组
    $arr = array('itcast', '今年', '10岁了');
     
    // PHP函数，计算数组的长度
    $length = count($arr);
 
    // echo $length;
 
    // 和Javascript是同样的
    // for($i=0; $i<$length; $i++) {
    //  echo $arr[$i];
    // }
 
    foreach($arr as $k=>$v) {
        echo $k . '~~~' . $v;
    };
 
    // 关联数组
    $arr1 = array('name'=>'itcast', 'age'=>'10');
 
    // 验证关联数组不能够按索引下标来访问
    // echo $arr1[0];
 
     //PHP遍历一个关联数组
     foreach($arr1 as $key=>$val) {
        echo $key . '~~~' . $val;
     }
     
     // 实际开发都是用foreach来遍历数组的

6.七、表单处理

表单name属性的是用来提供给服务端接收所传递数据而设置的

表单action属性设置接收数据的处理程序

表单method属性设置发送数据的方式

当上传文件是须要设置 enctype="multipart/form-data"，且只能post方式

$_GET接收 get 传值

$_POST接收 post 传值

$_FILES接收文件上传

move_uploaded_file($_FILES['image']['tmp_name'], 'test.jpg');

<form action="login.php" method="post">
    <div class="row">
        <label>用户：</label><input type="text" name="username"/>
    </div>
    <div class="row">
        <label>密码：</label><input type="password" name="password"/>
    </div>
    <div class="row">
        <input type="submit" value="登陆"/>
    </div>
</form>
<form action="login.php" method="post" enctype="multipart/form-data">
    <div class="row">
        <label>图片：</label><input type="file" name="image"/>
    </div>
    <div class="row">
        <input type="submit" value="上传"/>
    </div>
</form>

6.八、文件导入&&经常使用php函数

include '07.form.html';

    require '07.form.php'

$array = array(
        'username'=>'itcast',
        'password'=>'123456'
    );

    echo '获取数组的长度：'.count($array);
    echo '<br>';
    echo '判断是否在数组中：'.in_array('itcast',$array);
    echo '<br>';
    echo '检测数组中是否存在key：'.array_key_exists('username',$array);
    echo '<br>';

6.九、应用实例

一、用户登陆

<form action="login.php" method="post">
        <div class="row">
            <label>用户：</label><input type="text" name="username"/>
        </div>
        <div class="row">
            <label>密码：</label><input type="password" name="password"/>
        </div>
        <div class="row">
            <input type="submit" value="登陆"/>
        </div>
    </form>

<?php
    header('Content-Type:text/html; charset=utf-8');

    /*数据库当中的数据*/
    $userInfo = array(
        'username'=>'itcast',
        'password'=>'123456'
    );

    /*拿到提交过来的数据*/
    $username = $_POST['username'];
    $password = $_POST['password'];

    /*去匹配数据库当中的数据*/
    if($userInfo['username'] == $username && $userInfo['password'] == $password){
        header('refresh:0;url=jdMsite/');
    }else{
        header('refresh:0;url=login.html');
    }
?>

二、动态网站

京东首页

<?php
        header('Content-Type:text/html; charset=utf-8');
    
        $product_list = array(
            array(
            'imgUrl'=>'images/detail01.jpg',
            'newPrice'=>'15.00',
            'oldPrice'=>'19.00'
            ),
            array(
            'imgUrl'=>'images/detail02.jpg',
            'newPrice'=>'133.00',
            'oldPrice'=>'234.00'
            ),
            array(
            'imgUrl'=>'images/detail01.jpg',
            'newPrice'=>'340.00',
            'oldPrice'=>'1432.00'
            )
        );
    
        include 'index.html';
    ?>

<!--掌上秒杀的内容是会更新的并且是后台更新-->
    <ul class="sk_product">
        <?php foreach($product_list as $key => $val){ ?>
            <li>
                <a href="#"><img src="<?php echo $val['imgUrl'] ?>" alt=""/></a>
                <p class="new_price">&yen;<?php echo $val['newPrice'] ?></p>
                <p class="old_price">&yen;<?php echo $val['oldPrice'] ?></p>
            </li>
        <?php } ?>
    </ul>

京东分类

<?php
    header('Content-Type:text/html; charset=utf-8');

    $category = array(
        '热门推荐',
        '潮流女装',
        '品牌男装',
        '内衣配饰',
        '家用电器',
        '电脑办公',
        '手机数码',
        '母婴频道',
        '图书',
        '家居家纺',
        '居家生活',
        '家具建材',
        '热门推荐',
        '潮流女装',
        '品牌男装',
        '内衣配饰',
        '家用电器',
        '电脑办公',
        '手机数码',
        '母婴频道',
        '居家生活',
        '手机数码',
        '母婴频道',
        '图书',
        '家居家纺',
        '居家生活',
        '潮流女装',
        '家具建材',
        '热门推荐',
        '潮流女装',
    );

    //echo count($category);

    include 'category.html';
?>

<!--左侧分类-->
    <div class="jd_cate_left">
        <ul>
            <?php foreach($category as $key=>$val){ ?>
                <li class="<?php echo $key==1?'now':'' ?>"><a href="javascript:;"><?php echo $val ?></a></li>
            <?php } ?>
        </ul>
    </div>

七、网络传输协议

7.一、常见协议

一、HTTP、HTTPS 超文本传输协议

二、FTP 文件传输协议

三、SMTP 简单邮件传输协议

7.二、http协议

超文本传输协议（HTTP，HyperText Transfer Protocol) 网站是基于HTTP协议的，
例如网站的图片、CSS、JS等都是基于HTTP协议进行传输的。

HTML Hypertext Markup Language

HTTP协议是由从客户机到服务器的请求(Request)和从服务器到客户机的响应(Response)进行了约束和规范。

即HTTP协议主要由请求和响应构成。

经常使用请求方法 POST、GET、PUT、DELETE

咱们经过浏览器插件 FireFox httpFox 调试。ctrl shift f2 调用

7.2.一、请求和请求报文

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

一、请求行

由请求方式、请求URL和协议版本构成

GET /day01/code/login.php?username=123&password=123 HTTP/1.1

POST /day01/code/login.php HTTP/1.1

二、请求头

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形式当不须要

7.2.二、响应和响应报文

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

一、状态行

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

二、响应头

Date：响应时间

Server：服务器信息

Last-Modified：资源最后修改时间由服务器自动生成

ETag：资源修改后生成的惟一标识

由服务器自动生成

Content-Length：响应主体长度

Content-Type：响应资源的类型

三、响应主体

即服务端返回给客户端的内容；

状态码

常见的有200表明成功、304文档未修改、403没有权限、404未找到、500服务器错误

八、AJAX编程

即 Asynchronous [e'sɪŋkrənəs] Javascript And XML，
AJAX 不是一门的新的语言，而是对现有技术的综合利用。
本质是在HTTP协议的基础上以异步的方式与服务器进行通讯。

8.一、异步

指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序自己的书写顺序，相反则为同步。

其优点在于不阻塞程序的执行，从而提高总体执行效率。

XMLHttpRequest能够以异步方式的处理程序。

8.二、 XMLHttpRequest

浏览器内建对象，用于在后台与服务器通讯(交换数据) ，
由此咱们即可实现对网页的部分更新，而不是刷新整个页面。

/*js 内置的 http 请求对象  XMLHttpRequest*/

    /*1.怎么使用 这个内置对象*/
    var xhr = new XMLHttpRequest;

    /*2.怎么样去组请求*/
    /*请求的行*/
    xhr.open('post','01.php');

    /*请求头*/
    //get  没有必要设置
    //post 必须设置 Content-Type: application/x-www-form-urlencoded
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

    /*请内容*/
    /*3.发送请求*/
    xhr.send("name=xjj&age=10");

8.2.一、请求

HTTP请求3个组成部分与XMLHttpRequest方法的对应关系

一、请求行

xhr.open('post','01.php');

二、请求头

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
get请求能够不设置

三、请求主体

xhr.send("name=xjj&age=10");
get能够传空

注意书写顺序

8.2.二、响应

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

HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系。

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

if(xhr.readyState == 4 && xhr.status == 200){
        console.log('ok');
        console.log(xhr.responseText);
        /*把内容渲染在页面当中*/
        document.querySelector('#result').innerHTML = xhr.responseText;
    }

**readyState**
0：请求未初始化（尚未调用 open()）。  
1：请求已经创建，可是尚未发送（尚未调用 send()）。  
2：请求已发送，正在处理中（一般如今能够从响应中获取内容头）。  
3：请求在处理中；一般响应中已有部分数据可用了，可是服务器尚未完成响应的生成。  
4：响应已完成；您能够获取并使用服务器的响应了。

onreadystatechange是Javascript的事件的一种，其意义在于监听XMLHttpRequest的状态

一、获取状态行（包括状态码&状态信息）

xhr.status 状态码

xhr.statusText 状态码信息

二、获取响应头

xhr.getResponseHeader('Content-Type');
xhr.getAllResponseHeaders();

三、响应主体

xhr.responseText
xhr.responseXML

咱们须要检测并判断响应头的MIME类型后肯定使用request.responseText或者request.responseXML

8.3.三、API详解

xhr.open() 发起请求，能够是get、post方式
xhr.setRequestHeader() 设置请求头
xhr.send() 发送请求主体get方式使用xhr.send(null)
xhr.onreadystatechange = function () {} 监听响应状态
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须要设置

五、GET效率更好（应用多）

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

问题？如何获取复杂数据呢？

8.三、 XML

一、必须有一个根元素
二、不可有空格、不能够数字或.开头、大小写敏感
三、不可交叉嵌套
四、属性双引号（浏览器自动修正成双引号了）
五、特殊符号要使用实体
六、注释和HTML同样
虽然能够描述和传输复杂数据，可是其解析过于复杂而且体积较大，因此实现开发已经不多使用了。

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <arrayList>
        <array>
            <src>images/banner.jpg</src>
            <newPirce>12.00</newPirce>
            <oldPrice>30.00</oldPrice>
        </array>
        <array>
            <src>images/banner.jpg</src>
            <newPirce>12.00</newPirce>
            <oldPrice>30.00</oldPrice>
        </array>
    </arrayList>
</root>

<?php 
    header('Content-Type:text/xml;charset=utf-8');
    /*以xml格式传输数据的时候要求响应内容格式是   text/xml*/

    /*file_get_contents 获取文件内容*/
    $xml = file_get_contents('01.xml');

    /*输出xml内容*/
    echo $xml;
?>

var xhr = new XMLHttpRequest;
xhr.open('get','01.php');
xhr.send(null);
xhr.onreadystatechange = function(){
    if(xhr.status == 200 && xhr.readyState == 4){
        /*获取到XML格式内容  放回的是DOM对象  document*/
        var xml = xhr.responseXML;
        /*经过选着器能够获取到xml的数据*/
        console.log(xml.querySelectorAll('array')[0].querySelector('src').innerHTML);
    }
}

8.四、 JSON

即 JavaScript Object Notation，另外一种轻量级的文本数据交换格式，独立于语言。

一、数据在名称/值对中
二、数据由逗号分隔(最后一个健/值对不能带逗号)
三、花括号保存对象方括号保存数组
四、使用双引号

[
  {"src":"images/detail01.jpg","oldPrice":"10.12","newPrice":"130.00"},
  {"src":"images/detail02.jpg","oldPrice":"1.00","newPrice":"11.00"},
  {"src":"images/detail03.jpg","oldPrice":"100.00","newPrice":"1000.00"}
]

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

一、PHP解析方法
json_encode()、json_decode()

<?php 
    header('Content-Type:text/html;charset=utf-8');
    /*以json格式传输数据的时候要求响应内容格式是   application/json*/
    /*注意也能够不设置  可是这遵循的一个规范*/

    /*file_get_contents 获取文件内容*/
    $json = file_get_contents('01.json');

    /*输出json内容*/
    echo $json;
    echo '<br><br>';

    $array = array(
        array('src'=>'images/detail01.jpg','newPrice'=>'12.00','oldPrice'=>'455.00'),
        array('src'=>'images/detail02.jpg','newPrice'=>'65.00','oldPrice'=>'878.00'),
        array( 'src'=>'images/detail01.jpg','newPrice'=>'100.00','oldPrice'=>'1000.00')
    );

    /*将php数组转化成json字符*/
    $json_array = json_encode($array);
    echo $json_array;
    echo '<br><br>';

    /*将json字符转化成php数组*/
    $array_json = json_decode($json_array);
    echo $array_json;
    echo '<br><br>';
?>

一、Javascript 解析方法
JSON对象 JSON.parse()、JSON.stringify()；
JSON兼容处理json2.js
总结：JSON体积小、解析方便且高效，在实际开发成为首选。

var xhr = new XMLHttpRequest;
    xhr.open('get','01.php');
    xhr.send(null);
    xhr.onreadystatechange = function(){
        if(xhr.status == 200 && xhr.readyState == 4){
            /*获取仅仅是字符串*/
            var text = xhr.responseText;
            
            /*须要把字符串转化成JSON对象*/
            var json_obj = JSON.parse(text);
            console.log(json_obj);
    
            /*咱们也能够把JSON对象转化成字符串*/
            var json_str = JSON.stringify(json_obj);
            console.log(json_str);
        }
    }

8.五、兼容性

关于IE的兼容方面，了解便可。

function XHR() {
        var xhr;
        try {
            xhr = new XMLHttpRequest();
        }
        /*若是 try内的程序运行错误  抛出异常  捕捉异常  上面程序当中运行的错误*/
        catch(e) {
            /*在不一样的IE版本下初始  ActiveXObject  须要传入的标识*/
            var IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];

            for (var i=0;i<IEXHRVers.length;i++) {
                try {
                    xhr = new ActiveXObject(IEXHRVers[i]);
                }
                catch(e) {
                    /*若是出现错误的时候  中止当次的循环*/
                    continue;
                }
            }
        }
        return xhr;
    }

8.六、封装ajax工具函数

/**
 * ITCAST WEB
 * Created by zhousg on 2016/7/24.
 */
/*封装一个ajax工具函数*/
window.$ = {};
/*经过$定义一个ajax函数*/

/*
* 1. type   string   请求的方式  默认是get
* 2. url    string   请求地址  接口地址
* 3. async  boolean  默认的是true
* 4. data   object   {}请求数据
*
* 5.success function  成功回调函数
* 6.error   function  失败的回调函数
* */
$.ajax = function(options){

    if(!options) return false;

    /*options 参数传递*/
    var type = options.type || 'get';
    var url = options.url || location.pathname;
    var async = options.async === false ? false : true;
    var data = options.data || {};

    /*data 选要转化成  name=xjj&age=10*/
    var dataStr = '';
    for(var key in data){
        //console.log(data[key]);
        dataStr += key+'='+data[key]+'&';
    }

    /*若是就数据  就裁剪掉最后一个&*/
    dataStr = dataStr && dataStr.slice(0,-1);


    /*ajax 编程*/
    /*初始化*/
    var xhr = new XMLHttpRequest();

    /*请求行*/
    /*若是是get请求那么就要拼接数据在url后面 ？*/
    xhr.open(type,type == 'get'?url+'?'+dataStr:url,async);

    /*请求头*/
    /*若是是post请求须要设置 content-type application/x-www-form-urlencoded*/
    if(type == 'post'){
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    }

    options.beforeSend && options.beforeSend();

    /*请求主体*/
    /*若是是post请求须要把数据字符传过去  不然是null*/
    xhr.send(type=='get'?null:dataStr);

    /*监听响应状态的改变*/
    xhr.onreadystatechange = function(){
        /*响应成功*/
        if(xhr.readyState == 4){
            if( xhr.status == 200){
                /*处理响应成功函数*/
                var result = '';
                /*接受数据*/
                /* json  xml  string*/
                var contentType = xhr.getResponseHeader('Content-Type');

                if(contentType.indexOf('xml') > -1){
                    /*服务端返回的是xml数据格式*/
                    result = xhr.responseXML;
                }else if(contentType.indexOf('json') > -1){
                    /*服务端返回的是json数据格式*/
                    /*json字符串*/
                    var str  = xhr.responseText;
                    result = JSON.parse(str);
                }else{
                    result = xhr.responseText;
                }

                /*调用回调函数*/
                options.success && options.success(result);
            }
            /*响应失败*/
            else{
                /*处理响应失败函数*/
                options.error && options.error('request fail code' + xhr.status);
            }

            options.complete &&  options.complete();
        }
    }
};

$.get = function(options){
    options.type = 'get';
    $.ajax(options);
};
$.post = function(options){
    options.type = 'post';
    $.ajax(options);
};

8.七、 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 响应完成时调用（包括成功和失败）
jQuery Ajax介绍
http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

8.八、案例练习

一、Loading状态
二、禁止重复提交
三、表单处理
四、数据验证
接口化开发
请求地址即所谓的接口，一般咱们所说的接口化开发，实际上是指一个接口对应一个功能，
而且严格约束了请求参数和响应结果的格式，这样先后端在开发过程当中，能够减小没必要要的讨论，
从而并行开发，能够极大的提高开发效率，另一个好处，当网站进行改版后，服务端接口只须要进行微调。

具体参考代码

九、模版引擎

9.二、 artTemplate 简介语法模板

<script src="dist/template.js"></script>

下载(https://raw.github.com/aui/artTemplate/master/dist/template.js)

编写模版

<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
    {{each list as value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
    {{/each}}
</ul>
</script>

渲染数据

var data = {
    title: '标签',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;

简介语法

{{if admin}}
    {{include 'admin_content'}}

    {{each list}}
        <div>{{$index}}. {{$value.user}}</div>
    {{/each}}
{{/if}}

9.一、 artTemplate 原生 js 模板语法版

使用

在页面中引用模板引擎：

<script src="dist/template-native.js"></script>

下载(https://raw.github.com/aui/artTemplate/master/dist/template-native.js)

表达式

<% 与 %> 符号包裹起来的语句则为模板的逻辑表达式。

输出表达式

对内容编码输出：

<%=content%>

不编码输出：

<%=#content%>

编码能够防止数据中含有 HTML 字符串，避免引发 XSS 攻击。

逻辑

支持使用 js 原生语法

<h1><%=title%></h1>
<ul>
    <%for(i = 0; i < list.length; i ++) {%>
        <li>条目内容 <%=i + 1%> ：<%=list[i]%></li>
    <%}%>
</ul>

模板不能访问全局对象，公用的方法请参见文档辅助方法章节
模板包含表达式

用于嵌入子模板。

<% include('template_name') %>

子模板默认共享当前数据，亦能够指定数据：

<% include('template_name', news_list) %>

辅助方法

使用template.helper(name, callback)注册公用辅助方法，例如一个基本的 UBB 替换方法：

template.helper('$ubb2html', function (content) {
    // 处理字符串...
    return content;
});

模板中使用的方式：

<% $ubb2html(content) %>

十、同源&跨域

10.1 同源

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

10.2 跨域

不一样源则跨域
例如http://www.example.com/

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    同源  只是目录不一样

10.3 跨域方案（课外拓展）

一、顶级域名相同的能够经过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

10.四、 jsonp

JSON with Padding

一、原理剖析

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

<!--
当咱们用script标签去加载的时候  会把内容解析成js去执行
-->
<script>
    function fuc(data){
        console.log(data.name);
    }
</script>
<script src="http://www.guangzhou.com/api.php?callback=fuc"></script>

十一、综合案例

11.一、瀑布流案例（必须掌握）

11.二、天气接口（必须掌握）

接口地址
http://developer.baidu.com/map/carapi-7.htm

url: 'http://api.map.baidu.com/telematics/v3/weather?output=json&ak=0A5bc3c4fb543c8f9bc54b77bc155724',

http服务&ajax编程

http服务&ajax编程

一、服务器

1.一、服务器类型

1.二、服务器软件

1.三、HTTP服务器

二、客户端

三、网络基础

3.1 IP地址

3.二、域名

3.三、DNS服务

3.四、端口

四、软件架构

4.一、C/S结构

4.二、B/S结构

五、搭建HTTP服务

5.1 安装WampServer

5.2 管理HTTP服务

5.3 配置根目录

5.4 网站部署

5.5配置虚拟主机

六、PHP基础

6.一、最简单的php程序

6.三、变量

6.三、数据类型

6.四、运算符&内容输出

6.五、函数

6.六、分支，循环语句

6.七、表单处理

6.八、文件导入&&经常使用php函数

6.九、应用实例

七、网络传输协议

7.一、常见协议

7.二、http协议

7.2.一、请求和请求报文

7.2.二、 响应和响应报文

八、AJAX编程

8.一、 异步

8.二、 XMLHttpRequest

8.2.一、请求

8.2.二、响应

8.3.三、API详解

8.三、 XML

8.四、 JSON

8.五、 兼容性

8.六、 封装ajax工具函数

8.七、 jquery的ajax

8.八、 案例练习

九、模版引擎

9.二、 artTemplate 简介语法模板

9.一、 artTemplate 原生 js 模板语法版

十、同源&跨域

10.1 同源

10.2 跨域

10.3 跨域方案（课外拓展）

10.四、 jsonp

十一、综合案例

11.一、瀑布流案例（必须掌握）

11.二、天气接口（必须掌握）

11.三、省级联动（课外拓展）

7.2.二、响应和响应报文

8.一、异步

8.五、兼容性

8.六、封装ajax工具函数

8.八、案例练习