ajax和jQuery-ajax

crazy dog

程序员

一.ajax

ajax:异步无刷新技术

实现流程：
1、得到核心对象XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2、准备/打开请求
open(请求类型GET/POST,请求的路径,是否异步true/false);
3、发送请求
send(参数/null);
注：如果是get请求，参数直接跟在请求路径后面，send()方法中设置null;
如果是post请求，有参数则设置参数，无参数设置为null;
4、解析响应数据
1、判断响应是否成功 status=200 （404=未找到资源;500=服务器异常;200=成功）
2、得到后台响应数据 responseText

同步请求

// 1、得到核心对象XMLHttpRequest对象
var xhr = new XMLHttpRequest();
console.log(xhr);
// 2、准备/打开请求  open(请求类型GET/POST,请求的路径,是否异步true/false);
xhr.open("GET","js/data.json?uname=zhangsan&uage=10",false); // 同步请求
// 3、发送请求  send(参数/null);
xhr.send(null);
// 4、解析响应数据
if (xhr.status == 200) { // 1、判断响应是否成功 status=200
   // 2、得到后台响应数据  responseText
   console.log(xhr.responseText);
   var user = JSON.parse(xhr.responseText);
   console.log(user);
   console.log(user.uname);
} else {
   alert("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);
}

异步请求

// 1、得到核心对象XMLHttpRequest对象
var xhr = new XMLHttpRequest();
console.log(xhr);
// 2、准备/打开请求  open(请求类型GET/POST,请求的路径,是否异步true/false);
xhr.open("POST","js/data.json",true); // 异步请求
// 由于Post请求的机制问题，需要模拟表单提交
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 3、发送请求  send(参数/null);
xhr.send(null);       
// 监听readystate事件 （0=尚未调用open方法；1=已调用open方法未调用send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完全接收）
xhr.onreadystatechange = function() {
   // 如果是异步请求，需要等待数据完全响应后再做处理
   if (xhr.readyState == 4) {
      // 4、解析响应数据
      if (xhr.status == 200) { // 1、判断响应是否成功 status=200
         // 2、得到后台响应数据  responseText
         console.log(xhr.responseText);
         var user = JSON.parse(xhr.responseText);
         console.log(user);
         console.log(user.uname);
      } else {
         console.log("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);
}

ajax封装

var obj = {
   method:"GET",
   url:"js/data.json?aa=11",
   async:true,
   data:{
      uname:"zhangsan",
      uage:18
   success:function(data){
      // 做想处理的事情
      console.log(data);
function ajax(obj) {
   // 1、得到核心对象XMLHttpRequest对象
   var xhr = new XMLHttpRequest();
   var params = formatParam(obj.data);
   // 判断是否是get请求，如果是则将参数拼接在url后面
   if ("GET" == (obj.method).toUpperCase()) {
      //  js/data.json?uname=zhangsan&uage=18
      obj.url += (obj.url).indexOf("?") > 0 ? "&" +params : "?" + params;
   // 2、准备/打开请求  open(请求类型GET/POST,请求的路径,是否异步true/false);
   xhr.open(obj.method,obj.url,obj.async);
   // 判断如果是POST请求
   if ("POST" == (obj.method).toUpperCase()) {
      // 由于Post请求的机制问题，需要模拟表单提交
      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      // 3、发送请求  send(参数/null);
      xhr.send(params); // post请求如果有参数，需要将参数设置在send方法中
   } else {
      xhr.send(null); // get请求设置为null
   // 判断是同步请求还是异步请求
   if (obj.async)  { // 异步请求
      // 监听readystate事件 （0=尚未调用open方法；1=已调用open方法未调用send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完全接收）
      xhr.onreadystatechange = function() {
         // 如果是异步请求，需要等待数据完全响应后再做处理
         if (xhr.readyState == 4) {
            // 处理响应结果
            callback();
   } else { // 同步请求
      // 处理响应结果
      callback();
   // 处理响应结果
   function callback() {
      // 4、解析响应数据
      if (xhr.status == 200) { // 1、判断响应是否成功 status=200
         // 2、得到后台响应数据  responseText
         /* console.log(xhr.responseText);
         var user = JSON.parse(xhr.responseText);
         console.log(user); */
         obj.success(xhr.responseText);
      } else {
         console.log("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);
// formatParam({ uname:"zhangsan", uage:18 });
/*将对象格式的参数转换成等号拼接的字符串*/
function formatParam(data) {
   // 判断参数是否存在
   if (data == null) {
      return "";
   // 定义数组，接收每个参数字符串
   var params = [];
   for(var key in data) {
      /* console.log(key);
      console.log(data[key]);
      console.log(key+"="+data[key]) */
      // js中通过push()方法向数组的最后追加
      params.push(key+"="+data[key]);
   console.log(params.join("&"));
   var param = params.join("&");// uname=zhangsan&uage=18
   return param;
}

二.jQuery-ajax

四个方法:ajax() get() post() getJSON()

1.ajax()

jquery调用ajax方法：
格式：$.ajax({});
参数：
type：请求方式GET/POST**************
url：请求地址url*************
async：是否异步，默认是true表示异步
data：发送到服务器的数据***********
dataType：预期服务器返回的数据类型***********
contentType：设置请求头
success：请求成功时调用此函数*************
error：请求失败时调用此函数

$.ajax({
   type:"post", // 请求类型 GET/POST 查询用GET/传参用POST
   url:"js/data.json", // 请求路径
   dataType:"json", // 预期服务器返回的数据类型 
   data:{ // 请求参数，键值对的json对象
   success:function(data){ // 请求成功时的回调函数
      console.log(data);
});

2.get()

1.请求json文件，忽略返回值
$.get('../js/cuisine_area.json');
2.请求json文件，传递参数，忽略返回值
$.get('../js/cuisine_area.json',{name:"tom",age:100});
3.请求json文件,拿到返回值,请求成功后可拿到返回值
$.get('../js/cuisine_area.json',function(data){
console.log(data)
});
4.请求json文件,传递参数,拿到返回值 *********************
$.get('../js/cuisine_area.json',{name:"tom",age:100},function(data){
console.log(data)
});

/* 无参数，无返回值 */
 $.get("http://localhost:8080/jqueryAjax/ServletTest");
/* 有参数，无返回值 */
 $.get("http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan"});
/* 无参数，有返回值 */
 $.get("http://localhost:8080/jqueryAjax/ServletTest",function(data){
   console.log(data);
/* 有参数，有返回值 */
 $.get("http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan"},function(data){
   console.log(data);
$.get("js/data.json",{},function(data){
   console.log(data);
});

3.post()

同get,把get()换成post()

4.getJSON()

$.getJSON("http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan"},function(data){
   console.log(data);
$.get("http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan"},function(data){
   console.log(data);
});

三.使用ajax()模拟从数据库拿数据创建表格

$.ajax({
   type:"get",
   url:"js/data.json",
   success:function(data){
      console.log(data);
      // 创建表格对象 
      var table = $("<table align='center' border='1' width='800px' style='border-collapse: collapse;'></table>");
      // 创建表头对象
      var tr = "<tr><th>编号</th><th>姓名</th><th>密码</th><th>年龄</th><th>性别</th><th>头像</th></tr>";
      // 将表头插入到表格中（最后面）
      table.append(tr);
      // 得到用户数据列表
      var userList = data.result;
      // 遍历数据数组
      for (var i = 0; i < userList.length; i++) {
         // 得到每一个user对象
         var user = userList[i];
         // 创建tr对象
         var userTr = $("<tr></tr>");
         // 拼接td
         var td = "<td>"+user.userId+"</td><td>"+user.userName+"</td>";
         td += "<td>"+user.userPwd+"</td><td>"+user.userAge+"</td>";
         // true表示男，false表示女
         var sex = "男";
         if (!user.userSex) {
            sex = "女";
         td += "<td>"+sex+"</td><td><img width='80px' height='80px'    src='"+user.userHead+"'/></td>";
         // 将td对象追加到tr内部最后面
         userTr.append(td);
         // 将tr追加到table对象中