Ajax概述以及使用

一、Ajax

(一)概述

1．简介:
Ajax：Asynchronous JavaScript And XML，异步的JS和XML，Ajax技术是基于js。
xml：Ajax刚出现时推荐使用xml来传递服务端的响应数据，但是目前已经过时，使用json代替了。
Ajax在市面上有两种称呼：局部刷新技术,异步加载技术

---

2.ajax的异步和同步:
同步加载：浏览器发出请求之后，处理等待响应的状态。在等待状态中，浏览器类似于“卡死”，不能进行其它操作。
异步加载：浏览器发出请求之后，可以自由进行其它操作。当服务端响应完成之后，客户端浏览器可以继续进行后续的操作。

---

(二)jQuery的Ajax

因为js的Ajax存在兼容性问题，并且每次都要写固定的代码比较繁琐，所以jQuery提供了封装后的更简单的方法，来实现Ajax。

$.post();

$.ajax()

$.get

---

//post方式请求
$.post(url, [params],function(result){}, [type]);
//get方式请求
$.get(url, [params],function(result){}, [type]);

url:请求的地址 必须 params:请求的参数，name=value&name=value….
result:是服务端响应回来的结果。如果type是text，result就是字符串如果type是json，那么result就是json对象
type:服务端响应回来的数据类型。text/json，jQuery框架会根据这一项配置把服务端响应回来的数据转换成我们要求的类型。

---

//原生方式请求
$.ajax({options});

常用的options有：
url: 请求的地址，必须 data：请求参数，name=value&name=value…
type：请求方式，get/post success
回调函数:function(result){}
async：true|false，是否异步 dataType：响应回来的数据类型

---

(三)js的Ajax

//1.创建Ajax引擎对象
var xmlhttp = new XMLHttpRequest();
//2.给Ajax引擎绑定事件，监听引擎的状态变化，并设置响应行为
xmlhttp.onreadystatechange = function(){
        //通常是需要等到服务端响应完成之后，再执行响应行为的代码
        if(xmlhttp.readyState == 4){
               //判断：只有服务端正常响应完成时，才执行响应行为代码
               if(xmlhttp.status == 200){
                      var result = xmlhttp.responseText;
                      //接收到响应结果之后，可以使用js代码来操作html文档，实现局部刷新
                      var div1 = document.getElementById("div1");
                      div1.innerHTML = result;
               }
        }
}
//3.给Ajax引擎配置请求的配置信息：请求方式，请求地址，是否异步
xmlhttp.open("get", "${pageContext.request.contextPath}/jsAjaxServlet?username=李四", true);
//4.发送请求
xmlhttp.send();

如果是post请求，传递请求参数如下：

xmlhttp.open("post", "${pageContext.request.contextPath}/jsAjaxServlet", true);
  //发送post请求参数时，需要添加content-Type请求头，目的是告诉服务端，发送过去的请求体数据的格式
  xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xmlhttp.send("username=张三");

---