ajax基础知识详解

2016-11-26 21:57:06来源:CSDN作者:GaojbSunny人点击

AJAX

项目开发模块:

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

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

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

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

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

服务器分类

按类型分:

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

按软件分:

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

按操作系统分:

Linux服务器、Windows服务器等;

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

常见的服务器软件有:

文件服务器:Server-UFileZillaVsFTP等;

数据库服务器:OracleMySQLPostgreSQLMSSQL等;

邮件服务器:PostfixSendmail等;

HTTP 服务器:ApacheNginxIISTomcatNodeJS等; 这里我们主要介绍HTTP服务器

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

其中phpnode.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-z0-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");

注意事项:

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

sublime代码片段:

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

 

webstorm代码片段:

 

PHP注意事项:

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

网络数据提交方式:

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

GET  方式:

浏览器方面:

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

2.formmothod属性的值为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.formmothod属性的值为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基本概念:

同步&异步

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

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

XMLHttpRequestjs对象) 异步对象

使用异步对象的步骤:

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的选取:后台程序员会通过文档或口头的方式告诉我们,如果不考虑提交文件,那么getpost用法基本一样,只不过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的子集,作用是进行数据的交换,而且由于语法更为简洁,网络传输,以及机器解析都更为迅速。

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

数据类型:

数字(整数或浮点数),字符串(在双引号中),逻辑值(truefalse),数组(在方括号中),对象(在花括号中),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是否书写正确。!!!

 

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台