Ajax的使用

Ajax是JQuery实现XMLHttpRequest的一种方式。

增加HTML5按钮，含有点击事件：

<button type="button" class="btn btn-warning" id="reloadRuleBtn">强制刷新</button>

增加JS Ajax调用：

document.getElementById("reloadRuleBtn").onclick = function() {
		$.ajax({
			type: "post",
			async: false,
			url: "/reload",
			data: {
				reloadTime: function() {
					return new Date();
				}
			},
			beforeSend: function() {
				$("#addResultMsg").html("强制加载中...");
			},
			success: function(data, status) {
				try {
					var result = "状态：" + data.errNo;
					result += ", 描述：" + data.errMsg;
					$("#addResultMsg").html(result);
				} catch (e) {
					$("#addResultMsg").html("强制返回信息出错！");
				}

			},
			error: function() {
				$("#addResultMsg").html("强制加载失败!");
			}
		});
	}

使用时遇到如下问题：

Q. 一直调用到error函数。

A. ajax跨域调用后台失败，修改了后端的httpserver，增加http头

response.Header().Set("Access-Control-Allow-Origin", "*")

对跨域的访问时，客户端可以使用jsonp解决。服务端可以增加http头部，增加跨域的地址，这里允许所有的地址。

将后端服务和js代码部署到同一个服务上，让ajax调用不跨域调用。

 

参考：

http://www.tuicool.com/articles/7FVnMz

http://www.w3school.com.cn/jquery/ajax_ajax.asp