js高薪班案例ajax第1天

1、Ajax入门和高级应用第1天（本课程共3天）依学院保密规定本PPT不得发给学生欲穷千里目，更上一层楼中期课程明细 - 共24个教学日： Ajax入门和高级应用 3天 HTML5响应式移动端10天 JavaScript面向对象框架设计 7天 中期实战 4天中期课程特点： 实用性很强，每个公司都在用 面试必问、必考 引申知识多，围绕一个主题，能拓展很多知识 全面深化内功的一个时期欢迎来到中期课程！当时过海波难进，今日回来甚易行去时凡骨凡胎重，得道身轻体亦轻。举世无人肯立志，立志修玄玄自明。当时过海波难进，今日回来甚易行。别语叮咛还在耳，何期顷刻见东溟。 明 吴承恩西游记上映之前不被看好的国产动画电

2、影大圣归来截至7月30日票房已经超过了7亿，打破了功夫熊猫保持4年的6.17亿的纪录，是国产动画电影的里程碑。一、Ajax技术整体感知1.1 从HTTP说开去一、Ajax技术整体感知 超文本传输协议（HTTP，HyperText Transfer Protocal ），是简单、可靠的互联网文件传输协议。“上网”这个事儿的本质，就是你输入网址之后，浏览器发出HTTP请求，请求服务器上的文件。服务器上的文件，再通过HTTP传输到本地，在浏览器中进行渲染。 一次HTTP请求，有上行请求、下行响应两部分。 一张网页，可能产生多个HTTP的请求。 通常，浏览器产生HTTP请求，是由于用户输入了新的网址、

3、或者点击了超级链接，使页面跳转，这将导致页面的全局刷新。而Ajax技术，可以使网页悄悄地、偷偷地发起HTTP请求，请求回来的数据在页面局部刷新呈递。1.2 看！这些都是Ajax！来看几个Ajax效果： 网易邮箱注册 传智播客高薪班入学测试系统 花瓣网、百度图片、网易1元夺宝 百度百家 百度搜索框智能感应 新浪图片频道 新浪微博点赞 拉勾网分页Ajax是这么个玩意儿：在不刷新页面的情况下，浏览器悄悄地、异步向服务器发出HTTP请求。服务器收到请求后，传回新的格式化数据（通常是JSON）。浏览器通过DOM将新数据呈递显示，页面仅局部刷新。一、Ajax技术整体感知1.3 Ajax是前端、后台配合完成

4、的事儿三、Hello World前端开发工程师的工作： 书写Ajax程序，准确发送带有参数的HTTP请求 解析接收到的JSON数据，用DOM技术在页面上呈递后台工程师的工作： 识别HTTP请求中的参数，查询数据库，发回JSON数据二、Ajax简介和异步的概念2.1 Ajax简介有趣的信息： AJAX 不是新的编程语言，而是一种使用已有标准的新概念。 2005年由美国人Jesse James Garrett推广，并取名。神奇的是，这哥们并不是搞程序的，而是搞设计的，是交互设计大师、用户体验大师。甚至是个优秀建筑设计师。 在 2005 年，Google 通过其 Google Suggest 使 A

5、JAX 变得流行起来。 在今天，很少有哪个网站不使用Ajax技术。 Ajax技术对智能手机支持非常好。 Ajax中字母x表示XML，实际上XML已经过时，现在的公司，几乎全都在使用JSON代替XML。所以理论上讲，应该称呼为Ajaj，不过，呃，这个词儿，长得好难看。二、Ajax简介和异步的概念全称：Asynchronous JavaScript and XML 中文：异步JavaScript和XML昵称：阿贾克斯、诶债克斯Jesse James Garrett2.2 深入理解Asynchronous 生活中同步和异步同步（synchronous）老渔翁，一钓竿，靠山崖，傍水湾，扁舟来往无牵绊。

6、沙鸥点点轻波远，荻港萧萧白昼寒，高歌一曲斜阳晚。一霎时波摇金影，蓦抬头月上东山。 清郑板桥钓鱼是修身养性的好活动。钓鱼需要安静，抛出吊杆之后，要静静的盯着浮漂，不能小猫钓鱼。你在“同步调用钓鱼函数”。二、Ajax简介和异步的概念asynchronous 即“异步”，synchronous“同步“。呃，这俩词儿有点梦幻，不能从字面上理解。异步（asynchronous）周末心情好，你要自己做顿饭。从冰箱拿块冻住的肉，用微波炉解冻。微波炉在解冻肉的时候，你同时洗菜、切菜。微波炉工作完毕，“叮”的一声提醒你。你把化冻的肉，和洗好的菜，下锅，炒炒炒。你在“异步调用微波炉函数”。2.2 深入理解Asyn

7、chronous 同步和异步的概念二、Ajax简介和异步的概念计算机领域中，我们经常遇见一种情况：在执行某个请求的时候，该请求不能立即返回，而是需要一段时间，比如文件I/O。所谓的同步和异步，就是体现在对待这种“不能立即返回的请求”的不同处理方式上。 同步：等待这个请求完成，进程被阻塞，此时，请求返回后，再执行后续语句。 异步：不等待这个请求完成，立即执行后续语句，请求返回后，执行回调函数里面的语句。2.2 深入理解Asynchronous Ajax技术中的异步二、Ajax简介和异步的概念 浏览器执行到Ajax代码这行语句，发出了一个HTTP请求，欲请求服务器上的数据。服务器的此时开始I/O，

8、需要花一些时间，所以不会立即产生下行HTTP报文。 由于Ajax是异步的，所以本地的JavaScript程序不会停止运行，页面不会假死，不会傻等下行HTTP报文的出现。后面的JavaScript语句将继续运行。 服务器I/O结束，将下行HTTP报文发送到本地。此时，回调函数将执行。回调函数中，将使用DOM更改页面内容。回调函数（callback）：JavaScript中，凡是需要一段时间才能完成的操作，采用异步方式执行，执行完毕之后，执行的函数，我们称为回调函数。三、Hello World3.1 服务器环境的搭建三、Hello World一个好前端开发工程师，必须要对服务器有一定的了解。 含有

9、Ajax脚本的HTML文件不能简单的双击运行。必须运行在服务器环境中。 服务器也是计算机，也有CPU、内存条、硬盘。只不过安装了web服务器软件罢了。 最出色的web服务器软件是：ApacheIISTomcatnginx 使用phpnow等一键安装包，可以快速地安装服务器软件，使你的笔记本电脑成为一台服务器。3.2 第一个Ajax小程序三、Hello World四步走：1. 创建XMLHttpRequest对象2. 设置接收到HTTP下行响应内容之后，要做什么事情3. 设置HTTP上行请求的细节4. 发送HTTP上行请求四、XMLHttpRequest对象详解4.1 XHR对象的创建四、XML

10、HttpRequest对象详解 Ajax技术的核心是XMLHttpRequest对象（简称XHR），这是由微软首先引入的一个特性，其他浏览器厂商后来都提供了相同的实现。 使用Ajax，首先是从创建XHR对象开始的，稍后你将知道创建这个对象，在低版本浏览器中有兼容性问题，我们把恶心的事儿，放到后面聊。在IE7及IE7+中创建XHR对象非常简单，仅仅需要一条语句：4.2 open和send方法四、XMLHttpRequest对象详解open()方法在使用XHR对象时，要调用的第一个方法是open()。它接受三个参数：要发送的请求的类型、请求的URL、表示是否异步的布尔值。 URL可以使用绝对路径，

11、不过今后的课程你将会知道，只能Ajax有跨域限制。 调用open方法并不会真正发送请求，而只是启动一个请求以备发送。send()方法要发送特定的请求，需要调用send()方法。它接受一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null，不能留空。一但调用send()方法，HTTP上行请求就将发出。4.3 readyState属性和onreadystatechange方法 四、XMLHttpRequest对象详解一但调用send()方法，HTTP上行请求就将发出。问题是，由于请求是异步的，所以我们不知道HTTP下行请求什么时候回来。XHR对象的readySta

12、te属性XHR对象的onreadystatechange方法只要readyState属性的值由一个值变成另一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。onreadystatechange事件，要写在open()和send()方法之前，这是为了保证浏览器的兼容。4.4 HTTP状态码四、XMLHttpRequest对象详解 HTTP状态码（HTTP Status Code）是用以表示网页服务器HTTP响应状态的3位数字代码。 在Ajax中，当xhr.readyState属性为4之后，xhr.status的值为此次HTTP

13、下行响应的状态码。 注意两个四级词汇：xhr.readyState、xhr.onreadystatechange、xhr.status字头意义需要记忆的重要状态码1*消息2*成功200 OK3* 重定向301 Moved Permanently304 Not Modified4* 请求错误400 Bad Request403 Forbidden404 Not Found5*服务器错误503 Service Unavailable6*其他4.5 XHR对象的兼容问题 四、XMLHttpRequest对象详解 在IE6中，XHR对象不能简单地通过new XMLHttpRequest()来创建，而是

14、通过MSXML库中的一个ActiveX对象实现的： 我们要进行浏览器能力检测，来决定如何实例化这个对象。来看MDN上的实例：五、了解PHP5.1 后台语言简介五、了解PHP前台语言和后台语言的不同 运行地点、运行环境、运行时间、主要任务、数据库、兼容性后台语言的本质 所有的后台语言都是预处理器。常见的后台语言 JavaEE、PHP、C#、Python、Perl、Ruby、Delphi、Lisp前端开发工程师学习后台语言的意义 面试加分 能更好的配合后台工程师完成项目 能更深入的理解HTTP、Ajax 能更快速的学习Node.js、MongoDB5.2 PHP基本语法五、了解PHP看手册，快速掌

15、握PHP 5.3 MySQL数据库的操作五、了解PHP看手册，快速掌握MySQL 六、GET请求和POST请求6.1 HTTP请求类型六、GET请求和POST请求 HTTP的上行请求有不同的请求类型（HTTP Request Methods）。所有类型都分别由一个简单英语单词描述，生动形象的表示出发出本次请求的目的。 需要注意的是，请求类型“不代表真的去做那个事儿”。比如，GET请求，也完全可以用于提交表单。 有了请求类型，用户访问同样的URL，但是由于请求类型不同，可以有不一样响应。这就是时下非常流行的RESTful设计。 HTTP请求类型有：GET用于请求、查询内容，目的是得到某个信息。仅

16、有请求头，没有请求实体。POST用于向服务器传递数据，目的是提交表单等。有请求实体。PUT用于向服务器发送更新某数据的请求，几乎不用DELETE用于向服务器传递删除命令，几乎不用6.2 GET请求和POST请求六、GET请求和POST请求GET请求 GET请求没有请求实体，查询参数通过URL表示。比如： GET请求是便于用户分享网址。 GET请求不保密，通过访问网址历史记录，能看到数据。 GET请求有大小限制，不能大于2KB。 GET请求瞬发。POST请求 post请求向服务器传递数据，并不是通过URL的参数，而是通过HTTP请求实体传输。 POST请求无法分享网址。 POST请求保密性强，传输的数据对用户透明，浏览器不会保存，页面关闭即作废。 POST请求没有理论上的限制。 POST请求是流。6.3 Ajax发起GET和POST六、GET请求和POST请求Ajax发起GET请求 open()参数中，需要对URL需要用问号缀参数。send()参数是null。 用 ponet()函数处理可能出现的非英语字符。 注意URL拼接格式。能不能编写一个