ajax学习笔记

AJAX

• 1、AJAX基本组成（170204）

• HTTP协议
• 请求
• 响应
• Wamp配置

• 2、http通信

• Request
• Response

• 3、php基本语法
• 4、XMLHttpRequest（170205）
• 5、xml或json返回数据（170207）
• 6、ajax封装
• 7、jQuery的$.ajax()方法（170208）
• 8、artTemplate模板引擎
• 9、使用script实现跨域（170210）
• 10、瀑布流
• 11、$.fn()
• 12、tips

AJAX

1、AJAX基本组成（170204）

（1）、Ajax，异步请求，实现页面的局部刷新； 客户端（Client）：前端，iOS，安卓； 服务器（Server）：服务器集群； 系统：Windows Server、linux（常用）； 作用：提供数据，存储数据；（2）、URL: 基本概念: • URL 的全称是 Uniform Resource Locator（统一资源定位符） • 通过 1 个 URL，能找到互联网上唯一的 1 个资源 • URL就是资源的地址、位置，互联网上的每个资源都有一个唯一的 URL URL格式: • 基本格式：协议头://主机地址/路径 ◦ 协议头：不同的协议，表示不同的资源查找及传输方式 ◦ 主机地址：存放资源主机的 IP 地址（域名） ◦ 路径：资源在主机中的具体位置

HTTP协议

http，Hypertext Transfer Protocol，超文本传输协议；

请求

请求行：写明了请求方式（get/post）和请求路径（url）；请求头：关键，包含了Content-type等信息， 客户端环境描述、客户端请求的主机地址信息、 客户端所能接收的数据类型，Accept:text/html；请求体：请求方式为get时其请求体为空，post时请求体里存放了需要传输的数据，例如需要上传的数据； tips：post需要设置请求头，get不需要设置；

响应

响应行/状态行：写有状态码和http版本号； HTTP协议版本，状态码，状态码英文名称；响应头：Content-type，记录了响应体中返回数据的文件格式；响应体：服务器返回的数据，格式为JSON或XML； Content-Type:text/html; text/css; text/xml; text/html; tips：这些Content-type都统称称为MIME类型；

Wamp配置

w:windows,a:apache,m:MySQL,p:php C/S架构，Client/Server，客户机/服务器； B/S架构，Browser/Server，浏览器/服务器；目的:为了能让我们在浏览器中输入域名的时候,也能访问我们服务器的资源步骤: 0.配置apache服务器根目录； 目的:浏览器中输入 127.0.0.1 访问的不再是wamp安装目录下C:\wamp\www 这个里面的资源,让其访问我们自己的资源； 更改\apache\Apache2.2.21\conf 目录下面的 httpd.conf 文件, 改其中两个地方,一个是 DocumentRoot的路径 , 另外一个是 <Directory/> 路径； 1.开启虚拟主机辅配置，在httpd.conf 中找到 Virtual hosts,去掉第二句前面的#号注释，开启httpd-vhosts虚拟主机模块； 2.配置虚拟主机，打开conf/extra/httpd-vhosts.conf ； 分别修改以下三项: DocumentRoot "在浏览器中输入域名之后访问的文件夹路径"； ServerName "自己配置的域名"； ServerAlias "www.自己配置的域名.com"； 其它项不需要修改 3.修改本机DNS（hosts）文件 打开C:\Windows\System32\drivers\etc\hosts(目录是固定的)进行修改 tips：配置文件修改之后必须要重启wamp服务器，配置才能够生效，否则将会出错；

2、http通信

URL:Uniform Resource Locator;HTTP:Hypertext Transfer Protocol;AJAX:Asynchronous JavaScript And XML;URL: （1）、基本概念: URL 的全称是 Uniform Resource Locator（统一资源定位符）； 通过 1 个 URL，能找到互联网上唯一的 1 个资源； URL就是资源的地址、位置，互联网上的每个资源都有一个唯一的 URL； （2）、URL格式: 基本格式：协议头://主机地址/路径 协议头：不同的协议，表示不同的资源查找及传输方式； 主机地址：存放资源主机的 IP 地址（域名）； 路径：资源在主机中的具体位置；HTTP： （1）、作用：规定了客户端与服务器数据的传输格式，一般有XML和JSON； 让客户端和服务器能有效地进行数据沟通； HTTP 协议是网络编程使用最为广泛的协议； · https协议，对页面进行了加密，相比http协议加载速度更慢； 旧版本：http 0.9、1.0； 现通用：http 1.1； （2）、HTTP协议特点 简单快速：因为HTTP协议简单，所以 HTTP 服务器的程序规模小，通信速度快； 灵活：HTTP 允许传输任意类型的数据； HTTP 0.9 和 1.0 使用非持续连接 限制每次连接只处理一个请求，服务器对客户端的请求做出响应后，立刻断开连接，这种方式可以节省传输时间； HTTP 1.1 使用持续连接 不必为每个web对象创建一个新的连接，一个连接可以传送多个对象； tips:持续连接并非连接上就不会断开，http1.1在客户端与服务器连接的时候，有一个时间戳， 当计时结束的时候，客户端仍然没有新的操作发送到服务器，连接就会自动断开； tips：一个url代表了互联网上唯一的一个资源，域名解析控制在政府手中；

Request

请求（Request）：客户端向服务器索取数据的一种行为；HTTP协议规定：一个完整的由客户端发给服务器的 HTTP 请求 需要包含以下内容： （1）、请求行：指定请求方法（GET/POST）、请求资源路径，以及 HTTP协议版本，/表示访问根目录； eg： GET / HTTP/1.1 tips:也称为请求报文行。 （2）、请求头：对客户端的环境描述、客户端请求的主机地址等信息 请求头中至少包含，客户端要访问的服务器主机地址； eg: Host: m.baidu.com 请求头中还可以包含，客户端的类型，客户端的软件环境 eg: User-Agent: iPhone AppleWebKit 客户端所能接收的数据类型： Accept: text/html, */* 客户端的语言环境： Accept-Language: zh-cn 客户端支持的数据压缩格式： Accept-Encoding: gzip 访问结束后，是否断开连接： Connection: Close （3）、请求体(可选)：客户端发给服务器的具体数据，例如要上传的文件数据 请求格式 每一项请求信息末尾使用 \r\n 最后一个请求项末尾使用 \r\n\r\n 表示请求结束 tips：get方式请求体为空，post方法请求体不为空；

Response

响应（Response）：服务器对客户端的请求做出的反应，一般指返回数据给客户端HTTP协议规定：一个完整的 HTTP 响应包含以下内容： （1）、状态行：包含了HTTP协议版本、状态码、状态英文名称 eg：请求成功 HTTP/1.1 200 OK eg：内容无变化 HTTP/1.1 304 Not Modified tips:一般的，响应状态行的作用在于调试； （2）、响应头：包含了对服务器的描述、对返回数据的描述 服务器的类型： Server: Apache/2.4.10 (Unix) PHP/5.5.20 返回数据的类型 Content-Type: text/html 返回数据的长度 Content-Length: 660 响应时间 Date: Thu, 04 Jun 2015 19:31:50 GMT ETag(HASH值，用于检测本地资源和服务器资源是否一致) ETag: "294-4e1862f57e7c0" （3）、实体内容：服务器返回给客户端的具体二进制数据；