原生Ajax

一、初始Ajax

1、什么是Ajax?
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
2、原生Ajax学习

1. 传统请求的缺点：所有请求到达后台，最终都要进行转发或是重定向，页面肯定是整个页面的刷新，如果我们要得到的内容，仅仅只是作用与局部，那么使用局部刷新才是最好的选择。
2. AJAX技术的应用（ajax不是新语言，而是基于js语言的技术）：做原生ajax的操作，都是直接从文档中copy，里面的组件一定要知道每一个部分的作用。
   
   
   
   
   创建ajax技术的核心对象xmlhttp
   下图中显示如何创建
   
   使用核心对象如下图所示
   
   3.XMLHttpRequest对象的创建

var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

4.XMLHttpRequest对象的重要属性
readyState：返回当前请求的状态
onreadystatechange：指定当readState状态改变时使用的操作，一般用于指定具体的回调函数
responseText：接收以普通文本返回的数据
status：返回当前请求的http状态码
5.readyState的五种取值

6.open方法和send方法

7.使用AJAX发送请求的步骤：

1. 根据浏览器创建异步引擎对象
2. 设置异步引擎对象的属性，包括设置回调方法、设置请求路径以及请求方式、设置请求的头文件信息
3. 调用异步引擎对象的send方法请求，并传递请求的参数
4. 编写服务器端代码为Ajax做出响应
5. 编写回调方法根据服务器的响应数据对页面进行局部内容改变
   8.AJAX的get请求实例1（不带参数）：
   
   
   9.传递参数的其他作用：解决get缓存问题
   get请求缓存：是指当使用get方式发送ajax时，如果请求信息相同那么浏览器不会再出向服务器发送请求，导致访问服务器失败。
   解决方案：可以通过随机数或时间戳添加请求的后面作为参数，那么这样发送请求时每次请求信息都将不同可以避免缓存问题。关键代码：
   随机数方式：
   
   时间戳方式：
   
   10.设置异步或同步请求：
   关键代码：
   
   
   修改为true再试一次
   11.AJAX的post请求实例1（无参数）：
   与get请求一样的方式，一样的结果
   关键代码：
   
   
   1. AJAX的post请求实例1（有参数）：
      //3.打开一个连接：
      xhr.open(“POST”,”myServlet1.do”,true);
      // 4.发送请求
      xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
      xmlhttp.send(“str1=aaa&str2=bbb1”);
      13.AJAX对中文乱码的处理
      Get提交关键代码：
      
      Post提交关键代码：
      
      总结：尽可能使用POST请求避免乱码问题，并且后台Java类中使用request.setCharacterEncoding(“UTF-8”)，设置请求对象编码格式