ajax基础知识详解

AJAX
项目开发模块：

B/S模块 即浏览器/服务器（一般会优先做出来当展品）

优点：轻量级 缺点：无法做太多炫酷的特效

C/S模块 即客户端/服务器

优点:可实现很多炫酷的特效 缺点：重量级

服务器（本质上是一台电脑
用于存储和交互信息）

服务器分类

按类型分:

文件服务器、数据库服务器、邮件服务器、Web
服务器等；

按软件分:

Apache服务器、Nginx
服务器、IIS服务器、Tomcat服务器、Node服务器等。

按操作系统分:

Linux服务器、Windows服务器等；

常见服务器的外观组成：只有主板，CPU，主板，内存。

常见的服务器软件有：

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

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

邮件服务器：Postfix、Sendmail等；

HTTP 服务器：Apache、Nginx、IIS、Tomcat、NodeJS等；
这里我们主要介绍HTTP服务器

常见服务器的开发语言：java,php,python,go,ruby等。

其中php和node.js需要掌握，和js有关。

互联网访问方式分为：

互联网访问：需要互联网上用的服务器及域名；

局域网访问：可通过软件将任一电脑变成那个服务器访问。

常用的web服务器软件：apache(免费开源）--php(重点）

IIS---.net（微软用） tomcat--java;

局域网软件使用方法：

WAMP安装

双击提供的安装包，点击Next，选择安装路径,注意:不要使用中文路径.建议使用跟图片一致的路径，如果担心安装完成后找不到wamp可以将两个方框全部勾选,点击next继续安装，点击install开始安装

安装完毕以后点击finish即可启动wamp，启动完成能够在任务栏的右下角找到显示图标。

测试访问：127.0.0.1含义: 127.0.0.1是回送地址，指本地机，一般用来测试使用,如果想要让其他电脑也能够访问,需要进行一些配置。

关闭防火墙，修改httpd.conf文件 因为Apache的配置默认不允许外部访问，找到D:\wamp\bin\apache\Apache2.2.21\conf文件，使用文本编辑工具打开,通过搜索功能找到onlineoffline
tag - don't remove，将附近的Allow from 127.0.0.1
替换为 Allow from all保存,然后重启wamp`的所有服务即可，

找到WAMP的安装目录:D:\wamp

找到Apache的配置文件 D:\wamp\bin\apache\Apache2.2.21\conf，修改http.conf文件，使用文本编辑工具打开httpd.conf文件,搜索documentRoot 如果是初次安装,应该分别在178行,205行，修改完毕以后记得保存ctrl+s重启WAMP服务 左键点击wamp图标,选择重新启动所有服务 。

PHP语法：

注释：单行注释：//

多行注释: /**/

变量命名：$变量名，注意：$变量名为整个变量，要一起使用。

PHP变量规则:

变量以$符号开头，其后是变量的名称

变量名称必须以字母或下划线开头

变量名称不能以数字开头

变量名称只能包含字母数字字符和下划线（A-z、0-9 以及_）

变量名称对大小写敏感。

数据类型 PHP支持的数据类型包括:字符串,整数,浮点数,布尔,数组,对象,NULL。

运算符 PHP中的运算符跟JavaScript中的基本一致,用法也基本一致。

内容输出: echo:PHP语句直接使用即可,输出字符串。

// 数组

$arr = array('123',123)

 

循环语句: 这里只列举了foreach,for循环

// for 循环

for ($x=0; $x<=10; $x++) {

  echo "数字是：$x <br>";

}

header()函数 用来向客户端(浏览器)发送报头,如果出现中文无法显示,可以尝试在PHP代码顶部添加
如下代码

header("content-type:text/html; charset=utf-8");

注意事项：

必须放在服务器配置的网站目录中，不要直接右键用webstorm和sublime运行，必须写在<?php?>标签中，执行的位置是在服务器，需要通过浏览器请求，php页面才能够执行，php的逻辑代码不会输出，仅仅只会返回执行完毕的结果。

sublime代码片段：

工具（tool)  -  新代码段（developer - new snippets)

 

webstorm代码片段：

 

PHP注意事项：

最好不要使用中文命名，尤其是xxx.php文件命名的时候，如果出现错误并且无提示，先检查文件是否为php文件，网站根目录下不要有命名为index的文件，否则系统会默认找index文件。

网络数据提交方式：

首先要有对应的浏览器提交数据的html文件和服务端获取数据并处理的php文件。

GET  方式：

浏览器方面：

1.form的标签属性action的值为想要传值的php文件路径。

2.form的mothod属性的值为get,并且get为默认值。

3.表单元素要设置name属性，name属性的值为传输的键值对的key。

4.设置提交按钮。

通过get提交会把表单元素提交的值和name属性的值，拼接到url上，但是内容会显示在url上。

服务器端：

1.获取get提交的数据：

php提供了一个超全局对象$_GET，是一个关系数组，提取数值时使用$_GET[‘key’];key值为浏览器端的form表单元素的name属性的值，并且传过来的name属性的值要和key值一致。

POST 方式：

浏览器方面：

1.form的标签属性action的值为想要传值的php文件路径。

2.form的mothod属性的值为post。

3.表单元素要设置name属性，name属性的值为传输的键值对的key。

4.设置提交按钮。

通过post提交会把表单元素提交的值和name属性的值，拼接到url上，内容不会显示在url上，安全性稍微提高了一点。

服务器端：

2.获取post提交的数据：

php提供了一个超全局对象$_POST，是一个关系数组，提取数值时使用$_POST[‘key’];key值为浏览器端的form表单元素的name属性的值，并且传过来的name属性的值要和key值一致。

echo:PHP语句直接使用即可,输出字符串 

print_r():函数输出复杂数据类型,比如数组,对象 

var_dump():函数输出详细信息，如对象、数组

PHP文件上传处理$_FILES对象

上传文件时html代码中需要进行如下设置:

在html表单中需要设置enctype="multipart/form-data"，

只能post方式
PHP接收文件可以通过$_FILES来获取。

浏览器端部分代码：

假定浏览器在form表单中如下标签

form提交数据需使用post提交。

form提交数据时,需在form表单中添enctype=multipart/form-data属性。

服务端代码：

$_FILES用法跟$_GET,$_POST类似,都是关系型数组

#_FILE['key']:可以获取对应上传的文件,这里的key跟提交时的name相对应

#_FILE['key']['name'] 可以获取上传的文件名

#_FILE['key']['tmp_name']可以获取上传的文件保存的临时目录

move_uploaded_file(file.path)(移动文件)

上传的临时文件,一会就会被自动删除,我们需要将其移动到保存的位置

move_uploaded_file参数:

参数1:移动的文件

参数2:目标路径

Array ( [picture] => Array (

        [name] => computer.png

        [type] => image/png

        [tmp_name] => D:\wamp\tmp\php8913.tmp

        [error] => 0 [size] => 5212 )

    )

其中我们需要通过picture(根据表单标签的name属性决定)获取临时文件名以及上传文件名。

move_uploaded_file($_FILES['picture']['tmp_name'],

'./upload/'.$_FILES['picture']['name']);

案例 模拟用户查询和文件上传。

 php设置上传文件大小限制

修改php.ini

步骤

左键点击wamp，选择php，在弹出的窗口中选择php.ini，在打开的文件中进行修改，修改完毕,保存并重启wamp。

修改内容 使用文本编辑工具的搜索功能找到下列选项，进行修改。

设置文件最大上传限制(值的大小可以根据需求修改)

file_uploads = On   ; 是否允许上传文件 On/Off
默认是On

upload_max_filesize = 32M       ; 上传文件的最大限制

post_max_size = 32M             ; 通过Post提交的最多数据

考虑网络传输快慢,这里修改一些参数

max_execution_time = 30000      ; 脚本最长的执行时间 单位为秒

max_input_time = 600            ; 接收提交的数据的时间限制 单位为秒

memory_limit = 1024M            ; 最大的内存消耗

HTTP协议

网站是基于HTTP协议的,比如我们在开发网站中经常使用的css,js,图片等等都是基于该协议进行传输的

组成部分

从客户端(能够发送HTTP)发出的:请求Request。

从服务器返回的:响应Response。

 

 

请求/请求报文：主要有三个组成部分:请求行,请求头,请求主体。

响应报文是服务器发回给客户端的.组成部分有状态行,响应头,响应主体。

AJAX基本概念：

同步&异步

同步:必须等待前面的任务完成,才能继续后面的任务。

异步:不受当前任务的影响。

XMLHttpRequest（js对象） 异步对象

使用异步对象的步骤：

1.请求的网址,方法get/post

2.提交请求内容数据,请求主体等

3.接收响应回来的内容

五步使用法:

建立XMLHTTPRequest对象

1.注册回调函数

2.使用open方法设置和服务器端交互的基本信息

3.设置提交的网址,数据,post提交的一些额外内容

设置发送的数据，开始和服务器端交互

4.发送数据

5.在注册的回调函数中,获取返回的数据,更新界面

get代码：

<script type="text/javascript">

    // 创建XMLHttpRequest
对象

    var xml = new XMLHttpRequest();

    // 设置跟服务端交互的信息

    xml.open('get','01.ajax.php?name=fox');

    xml.send(null);    // get请求这里写null即可

    // 接收服务器反馈

    xhr.onreadystatechange = function () {

        // 这步为判断服务器是否正确响应

        if (xhr.readyState == 4 && xhr.status == 200) {

            // 打印响应内容

            alert(xml.responseText);

        }

    };

</script>

post代码：

<script type="text/javascript">

    // 异步对象

    var xhr = new XMLHttpRequest();

    // 设置属性

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

    // 如果想要使用post提交数据,必须添加

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    // 将数据通过send方法传递

    xhr.send('name=fox&age=18');

    // 发送并接受返回值

    xhr.onreadystatechange = function () {

    // 这步为判断服务器是否正确响应

    if (xhr.readyState == 4 && xhr.status == 200) {

           alert(xhr.responseText);

         }

    };

</script>

通过对象.responseText获取数据

注意：

get需要自己拼接URL。

Post使用的时候需要在发送请求前加入一段代码，如下：xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");并且发送的信息是拼接到send里面的。

实际开发中get/post的选取：后台程序员会通过文档或口头的方式告诉我们，如果不考虑提交文件，那么get和post用法基本一样，只不过POST能传递文件。

php读取文本文件

目的是实现数据和逻辑代码分离；php封装了很多方法，使代码操作更加简单便利。

读取文本文件使用file_get_contents()函数；括号内为路径名。

Xml方式：是按照某种既定的格式写的字符串，最开始的时候要写版本号（可选），都要书写双标签，最外层需要写一个根节点，标签的名字是可以随意编写的（但是不要使用数字开头和不要使用中文），如果书写了版本号，那么版本号的位置要放到第一行，否则会报错，如果使用php读取XML文件，要设置header,代码是header('content-type:text/xml;
charset= utf-8');

调用代码：file_get_contents('info/person.xml');

Json方式：JSON(JavaScript Object Notation),是ECMAScript的子集，作用是进行数据的交换,而且由于语法更为简洁，网络传输，以及机器解析都更为迅速。

语法规则: 数据在键值对中，数据由逗号分隔，花括号保存对象，方括号保存数组。

数据类型:

数字（整数或浮点数），字符串（在双引号中），逻辑值（true或false），数组（在方括号中），对象（在花括号中），null。

使用JSON对象

在HTML里面转化成JSON对象：

JSON.parse()方法:将JSON字符串转化为JavaScript对象

JSON.stringify()方法:将JavaScript对象,转化为JSON字符串

在PHP里面

JSON_decode()把str类型转化成php对象

JSON_encode()把php对象转化成str类型

封装异步5部曲 见代码部分。

为了能够通过AJAX对网页实现异步数据更新，可以使用模板引擎。

1.导入JS文件。

2.定义模板：

定义模板用到SCRIPT标签属性，并且TYPE的属性里没有javascript项，并且要有个ID值。

3.准备好对象

4.调用模板引擎，传入对象，进行替换，

异步更新页面数据时，需要使用到正则表达式.

JS中的RegExp对象:

    创建

        创建方法1: var reg = new RegExp("正则")

        创建方法2: var reg = /正则/;    推荐使用这种

    使用:

        reg.exec(string) 可以检测字符串

正则含义

    <%:以 <%
开始

    =\s* "="号之后有0个或多个空白字符

    ([^%>]+\S): 匹配除了%>以外的所有字符(至少1个)

    \s*:0个或多个空白字符

    %>:以%>结束

*/

    var reg = /<%=\s*([^%>]+\S)\s*%>/;

腾讯artTemplate模板引擎插件使用：

导入模板引擎: 将下载好的ArtTemplate导入到页面中

  <script type="text/javascript" src = "./files/template-native.js"></script>

定义模板:

<% %>这样的语法是定义逻辑表达式 <%=内容
%>这样的语法为输出表达式 注意:这里的模板type='text'如果写成javascript会执行

模板使用中 type必须写 非
javascript的内容 如果留空 会默认解析为
js 那么就报错了，只能接受对象,不能接受数组。

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

如果浏览器通过JQ的方法去服务器请求回来的数据，并通过设置返回后自动编码为json，如果返回回来的数据有中文，但是返回后的JSON是如上图所示，则表明是浏览器端的解码出现问题，去查看dataType是否书写正确。！！！