AJAX基础 -- 课件

Ajax是JavaScript和Java进行通信的一种方式
Java后台返回来的数据是一个比较像json的字符串；


任务：
1、上课的代码敲一遍；
2、预习Ajax；
3、回顾轮播图案例；


Ajax的概念：
1、全程：Asynchronous JavaScript and XML(异步的JavaScript和xml)
他并不是新得编程语言，而是几种原有技术的结合体；
2、Ajax是一种无需重新加载整个网页的情况下，能够更新部分网页的技术


为什么使用Ajax？ 他的优点：
1、通过异步模式，提升用户体验；
2、优化了浏览器和服务器之间的传输，减少不必要的数据返回，减少了带宽得占用
3、Ajax引擎是在客户端运行，承担了一部分本来由服务器承担的工作，减少服务器的负载；





Ajax的缺点：
1、不支持浏览器back按钮
2、安全问题：Ajax会暴露与服务器交互的细节
3、对搜索引擎的支持比较弱


XMLHttpRequest对象：
1、是一种支持异步请求的技术，他是Ajax的核心


XMLHttpRequest — 为什么是Ajax的核心？
1、可以向服务器提出请求并处理响应，而不阻塞用户；
2、可以在页面加载以后进行页面的局部更新


如何使用Ajax？
— 要完整实现一个Ajax异步调用和局部刷新的，通常由以下三步骤组成：
1、创建XMLHttpRequest对象。也就是创建一个异步调用对象 —— 创建XMLHttpRequest对象
2、创建一个新的HTTP请求，并在指定该HTTP请求的方法、url —— 发送Ajax请求
3、设置响应HTTP请求状态变化的函数 —— 处理服务器响应


第一个：案例讲解Ajax
需求：点击加载的时候，将我们服务器的信息动态的集在到浏览器页面上
1、这是第一步：


2、发送Ajax请求：
(1) Xmlhttp.open(); //用于创建请求
(2) Xmlhttp.send(); //用于发送请求


3、处理服务器响应
(1) xmlHttp.onreadystatechange()事件用于监听Ajax执行过程
(2) xmlHttp.readystate属性说明的是XMLHttpRequest当前的状态
① Readystate =0 — 请求未初始化
② Readystate =1 — 服务器连接已经建立
③ Readystate =2 — 请求已经被接收
④ Readystate =3 — 请求正在处理
⑤ Readystate =4 — 响应文本已被接收
(3) xmlHttp.status()属性服务器响应的状态码，200:成功 404:未找到。。。


第二个案例：编写一个新闻列表
1、准备后台数据
2、编写代码；


同步和异步的区别；



总结：
1、对于同步执行，相当于代码进入一个等待的状态，数据也不会返回，程序不会继续往下执行的
2、而异步的状态，Ajax是不会处于代码的阻塞的，程序自然继续往下执行，但是数据返回时通过onreadystatechange事件进行获取和处理的，这是两者根本的不同；