【15】Ajax

1. Ajax

• Ajax，Asynchronous JavaScript and XML ， 异步的JavaScript 和 XML
• Ajax 中，最核心的部分是JavaScript

2. 异步请求 和 同步请求

• 同步：请求（request）和响应（response）同步，发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
• 异步：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

3. Ajax 的应用

1. 搜索框自动补全
2. 地图
3. 视频播放
4. 登录
5. 检查用户名
6. 分页
7. 级联操作
8. 增删改查

4. Ajax实现思路

1. Ajax可以在页面不刷新的情况下，使用javascript通过XmlHttpRequest对象，和服务器进行交互。
2. Ajax是通过Http请求发送请求，获取少量数据，是页面局部刷新，不需要加载整个页面。

5. Ajax 的核心组件： XMLHttpRequest

6. Ajax的编写步骤（原生JavaScript）

1. 创建引擎

2. 编写回调函数

3. 建立连接

4. 发送数据

   	//创建引擎xmlHttpRequest
       var xhr = new XMLHttpRequest();
       //编写回调函数，接收服务响应的数据
       xhr.onreadystatechange = function () {
       };
       //建立连接
       xhr.open("get", "/AjaxServlet01");
       //发送数据
       xhr.send(null);
   

7. API详解

7.1 xmlhttp 对象创建

	    var xmlhttp;
	    if (window.XMLHttpRequest) {
	        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
	        xmlhttp = new XMLHttpRequest();
	    }
	    else {
	        // IE6, IE5 浏览器执行代码
	        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	    }

7.2 xmlhttp属性及事件设置

• onreadystatechange ：当state状态发生改变时，触发的事件。

• readyState 接收服务器响应状态，没当状态发生改变都会调用onreadystatechange属性后面的回调函数

  • readyState 属性可能的值：
    • 0 请求未初始化（在调用 open() 之前）xmlHttpRequest对象创建时的状态
      1 请求已提出（调用 send() 之前），在调用open()方法时，建立连接
      2 请求已发送（这里通常可以从响应得到内容头部） 调用send()方法时状态
      3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
      4 请求已完成（可以访问服务器响应并使用它）服务器数据已经响应完毕，已经将数据存储到引擎对象中，现在已经可以用引擎对象中的数据

• stauts 服务器响应的状态码

  • 常用的状态码：
    • 200(服务器响应正常)
    • 302(重定向)
    • 304(未修改，浏览器走缓存)
    • 404(请求的资源不存在)
    • 405(请求方式不正确)
    • 406(请求参数不对)
    • 500(服务器内部错误)

	xmlhttp.onreadystatechange = function () {
        //服务器已经将数据响应到引擎中，服务器响应正常
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            //接收到数据，处理数据
            //接收的数据类型是xml
            // xmlhttp.responseXML
    
            //接收的数据类型是字符串
            var responseText = xmlhttp.responseText;
            if(responseText){
                //获取到span
                var span = document.getElementById("usernameId");
                span.innerHTML=responseText;
            }  
        }
    }

7.3 xmlhttp打开请求

开启异步请求：通过xmlhttp对象的open()函数实现。

• open(method,url,async,user,password)
  • method 请求方式
  • get 参数会追加到url上
  • post请求使用send方法发送数据
  • url 后台服务器的请求路径，这里不是相对路径，url是绝对路径
  • async true 表示异步，页面可以异步刷新，false表示是同步，同步必须等到后台服务完全响应之后才可以做其他的事情

		//获取username表单的值
	    var username = document.getElementById("user-name-label");
	    var usernameVal = username.value;
	    xmlhttp.open("POST", "/AjaxServlet02", true);

• post请求必须设置请求的头,设置请求头，必须在打开连接之后，发送数据之前。

    	xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded")
  

7.4 xmlhttp发送请求

通过xmlhttp对象的 send() 函数发送请求。

• get请求，send方法不需要发送数据，send方法可以不写任何内容，但是考虑到浏览器版本兼容问题，一般建议写null

        xmlhttp.send("username="+usernameVal);
  

• 如果是post请求使用key=value的格式，发送数据到服务器

       xmlhttp.send("username="+usernameVal);
  

8. jQuery实现Ajax

8.1 jQuery.ajax(url,[settings])

• jQuery.ajax(url,[settings])：通过 HTTP 请求加载远程数据。

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

• settings:选项

  • data：待发送 Key/value 参数。
  • type：返回内容格式，xml, html, script, json, text, _default。
  • async：(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
    beforeSend(XHR)Function
  • data：发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 “&foo=bar1&foo=bar2”。
  • dataType：预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。可用值:
    • “xml”: 返回 XML 文档，可用 jQuery 处理。
    • “html”: 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
    • “script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。’’‘注意：’’'在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
    • “json”: 返回 JSON 数据 。
    • “jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
    • “text”: 返回纯文本字符串
  • error：请求失败时调用此函数。
  • success(data, textStatus, jqXHR) ：请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据。
  • type：请求方式 (“POST” 或 “GET”)， 默认为 “GET”。
  • url：发送请求的地址。

	$(document).ready(function(){
		$.ajax({
			url: "queryAllZhuanYe.action",
			type: "post",
			success:function(data){
				// alert(data)
				$(data).each(function(i,o){
					$("#zhuanYe_Id").append("<option value='"+o.zhuanYe_Id+"'>"+o.zhuanYe_Name+"</option>");
				})
			},
			dataType:"json"
		})
	})
	
	$.ajax({
		url: "checkCourserName.action",
		type: "post",
		data: {"courseName":$(this).val().trim()},
		success:function(data){
			if(data == "true"){
				$("#info").html('课程名已存在')
				flag = false;
			}else{
				$("#info").html('课程名可用')
				flag = true;
			}
		}
	})

8.2 jQuery.get(url, [data], [callback], [type])

• jQuery.get(url, [data], [callback], [type]) ： 通过远程 HTTP GET 请求载入信息。
  • url:待载入页面的URL地址
  • data:待发送 Key/value 参数。
  • callback:载入成功时回调函数。
  • type:返回内容格式，xml, html, script, json, text, _default。

	$.get("test.php", function(data){
	     alert("Data Loaded: " + data);
	});

	$.get("test.cgi", { name: "John", time: "2pm" },
          function(data){
          alert("Data Loaded: " + data);
	});

8.3 jQuery.post(url, [data], [callback], [type])

• jQuery.post(url, [data], [callback], [type]) ： 通过远程 HTTP POST 请求载入信息。
  • url:发送请求地址。
  • data:待发送 Key/value 参数。
  • callback:发送成功时回调函数。
  • type:返回内容格式，xml, html, script, json, text, _default。

	$.post("test.php", { name: "John", time: "2pm" },
          function(data){
          	  alert("Data Loaded: " + data);
          });
	
	$.post("test.php", { "func": "getNameAndTime" },
	      function(data){
	          alert(data.name); // John
	          console.log(data.time); //  2pm
	      }, "json");

8.4 jQuery.getScript(url, [callback])

jQuery.getScript(url, [callback]) ： 通过 HTTP GET 请求载入并执行一个 JavaScript 文件。

• url:待载入 JS 文件地址。
• callback:成功载入后回调函数。

	描述:
		加载并执行 test.js ，成功后显示信息。
		
	jQuery 代码:
		$.getScript("test.js", function(){
	  		alert("Script loaded and executed.");
		});

8.5 jQuery.getJSON(url, [data], [callback])

jQuery.getJSON(url, [data], [callback]) ：通过 HTTP GET 请求载入 JSON 数据。

• url:发送请求地址。
• data:待发送 Key/value 参数。
• callback:载入成功时回调函数。

	$.getJSON("test.js", function(json){
	  alert("JSON Data: " + json.users[3].name);
	});