【小白浅谈】 AJAX详解

概述：

实现网页局部刷新的一种技术（并不是一个新的技术，是对现有的几种技术的整合应用）
全称：Asynchronous JavaScript and XML(异步的JavaScript和XML)
Ajax应用到的技术：

• 基于 DHTML 和 CSS 的标准 Web 页面内容
• 由 DOM(Document Object Model)实现动态显示与交互
• 通过 XML 和 XSLT 进行数据交换以及处理
• 运用 XMLHttpRequest 对象实现异步数据获取（核心）
• 运用 JavaScript 整合上述技术

Javascript：负责创建异步对象，发送请求，更新DOM
XML：网络中传输数据格式，目前使用json代替。

Ajax的强大之处：

• 实现了网页局部的数据刷新

• 增强用户和网页交互体验

Ajax的交互过程

异步对象 - XMLHttpRequest

• 能够向服务器发出HTTP请求
• 能够接收服务器返回的数据
• 提供客户端和服务器异步通信的能力
• 浏览器都内建了 XMLHttpRequest 对象

Ajax开发过程

• XMLHttpRequest 状态
• 网络请求状态码
• 初始化异步对象
• 发送异步请求
• 处理数据

原生js实现ajax

1、异步对象:XMLHttpRequest

异步请求对象：

在局部刷新，Ajax 需要一个核心的异步请求对象，代替浏览器发起请求行为并接受服务端响应的数据，这个对象就是 XMLHttpRequest
对象。

XMLHttpRequest 对象：

作用

1、 在不重新加载网页的情况下更新网页
2、在网页已加载后向服务器请求数据
3、 在网页已加载后从服务器接收数据

所有市场上浏览器(IE7+、Firefox、Chrome、Sarafi以及Opera)都内建了XMLHttpRequest 对象。

通过JavaScript代码，创建XMLHttpRequest对象

onreadystatechange事件

当请求被发送到服务器时，我们需要一个触发事件onreadystatechange来执行一些响应的任务。
当readyState改变时，我们可以为该事件绑定一个function。通过判断XMLHttpRequest对象的状态，获取服务器的数据

readyState属性

存有 XMLHttpRequest 对象的状态。从 0 ~ 4 发生变化。

0 - 请求未初始化，创建异步对象 var xhr = new XMLHttpRequest()
1 - 初始化异步对象，xhr.open(请求方式, 请求地址, true)
2 - 异步对象发送请求，xhr.send()
3 - 异步对象从服务器接收响应数据，内部处理
4 - 数据已经解析完毕。此时才能读取数据。（开发人员需要做的是：更新页面数据）

status属性

表示网络请求状态，当status==200时，表示网络请求成功

xhr.onreadystatechange=function(){
	if(xhr.readyState==4&&xhr.status==200){
		//处理数据，更新页面
	}
}

2、初始化异步请求对象

open()方法

xhr.open(请求方式，“服务器端的访问地址”，“同步或异步”)

• 请求方式：get或post
• 同步或异步：默认是true，表示异步请求
  eg：

xhr.open("get","loginServlet?name=zs&&pwd=123",true)

3、 异步对象发送请求

send()方法

xhr.send();

4、获取服务器端响应数据

responseText属性

xhr.onreadystatechange = function(){
	if(xhr.readyState==4 && xhr.status==200){
		//处理数据，更新页面
		//获取服务器响应的数据
		var data = xhr.responseText;
		//将响应的数据赋值
		document.getElementById("name") = data
	}
}

原生js实现ajax示例：

浏览器发送数据给服务器，接收到服务器的数据后，响应返回浏览器显示

注意观察时间点一直木有变，说明页面木有刷新

请输入用户名：

服务器接收浏览器传来的数据，并返回浏览器数据

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       resp.setContentType("text/html;charset = utf-8");
        //获取请求参数 sName=？？
        String sName  = req.getParameter("sName");
        System.out.println("servlet...."+sName);
        //输出流，从服务器写数据到浏览器
        PrintWriter printWriter = resp.getWriter();
        printWriter.write(sName+",欢迎回来");
    }
}

JQuery实现ajax

1、JQuery的ajax和原生js实现ajax有什么关系？

JQuery中的ajax也是通过原生的js 封装的，封装完成后，我们使用起来更加方便，不用考虑底层实现或兼容性等处理。

2、JQuery实现方式：

$.ajax({url, [settings] })

url:一个用来包含发送请求的URL字符串
settings：Ajax请求设置。所有选项都是可选的

• type ：默认值: “GET”。请求方式 (“POST” 或 “GET”)
• data 发送到服务器的数据
  格式：必须为 Key/Value 格式。
  如果为数组，jQuery 将自动为不同值对应同一个名称。
  如 {foo:[“bar1”, “bar2”]}
• dataType 预期服务器返回的数据类型 “xml” “html” “text” “script” “json” “jsonp”
• success 指定请求成功时调用的函数
• error 指定请求失败时调用的函数

简化写法

$.get/ $.post
$.get(url,data,success(response,status,xhr),dataType)
$.post(url,data,success(response,status,xhr),dataType)

常见参数

• url 必需。规定将请求发送的哪个 URL。
• data 可选。规定连同请求发送到服务器的数据。
• success(function) 可选。规定当请求成功时运行的函数。
• dataType 可选。规定预计的服务器响应的数据类型。
  “xml” “html” “text” “script” “json” “jsonp”

jQuery实现ajax示例

浏览器：

    
    
    
    


注意观察时间点一直木有变，说明页面木有刷新


请输入用户名：

服务器：

@WebServlet("/ajaxServlet00")
public class AjaxServlet00 extends HttpServlet{
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");

        //获取参数
        String uname = req.getParameter("uname");
        String age = req.getParameter("age");
        System.out.println(uname +","+ age);

        //响应数据
        resp.getWriter().print("接收到数据...");
    }
}