AJAX见解

AJAX实例
1.什么是AJAX?
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
XMLHttpRequest 是 AJAX 的基础。
创建XMLHttpRequest:
//创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
XMLHttpRequest 对象用于和服务器交换数据
//向服务器发送请求
向服务器发送请求需要用到XMLHttpRequest对象的open()和send()方法
xmlhttp.open(“GET”,“ajax_info.txt”,true);
xmlhttp.send();
GET和POST相比
GET:更简单也跟快,并且大部分情况下都能使用
POST:没有GET那样的数据量限制,可以向服务器发送大量数据,
发送包含未知字符的用户输入时,POST比GET更稳定也更可靠.
方法:
规定类型 url以及是否异步处理请求open(method,url,async); 将请求发送到服务器send(string)
Method:请求的类型 url:文件在服务器上的位置;async:异步或同步;string:仅限于POST请求
GET请求:
function GetData() {
$.ajax({
type: “get”,
url: “`/…”,
async:true,//如果设置的值为true则可以省略该行代码
dataType: “json”,
success: function (data) {
console.log(data);//js对象
$("#txtName").val(data.name);
$("#cboSex").val(data.sex);
$("#txtAddress").val(data.address);
}
})
}
success:是一个方法，请求成功后的回调函数，传入返回后的数据，以及包含成功代码的字符串
dataType:服务器返回的数据类型,一般采用json格式,可以设置为”json”;

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

$.ajax({
url: “”,//规定发送请求的 URL。默认是当前页面。
method: “post”,
contentType: false,//让Ajax不指定数据类型
processData: false,//让Ajax不对数据进行处理
data: formData,//发送到服务器的数据。将自动转换为请求字符串格式
success: function (jsonMsg) {//当请求成功时运行的函数。

定义和用法:
ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
最简单的情况下，$.ajax() 可以不带任何参数直接使用。
注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

$(function(){
$(’#send’).click(function(){
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ata: {username:("#username").val(), content:$("#content").val()},
dataType: “json”,
success: function(data){
$(’#resText’).empty(); //清空resText里面的所有内容
var html = ‘’;
$.each(data, function(commentIndex, comment){
html += ‘

’ + comment[‘username’]
+ ‘:

<p class=“para”’ + comment[‘content’]
+ ‘

’;
});
$(’#resText’).html(html);
}
});
});
});
服务器的响应:
responseText:获得字符串形式的响应数据。
//事件监听,服务器响应
xhr.onload = function () {
//反序列化,转化为JSON对象
var jsonMsg = JSON.parse(xhr.responseText);
if (jsonMsg.State) {
//刷新表格
tabMerchandiseSearch();
//关闭模态框
$("#insertModal").modal(“hide”);
layer.alert(jsonMsg.Text, { icon: 1,tiele: “提示”});
} else {
layer.alert(jsonMsg.Text, { icon: 0, tiele: “提示” });
}
}
//向服务器发送请求
xhr.send(frData);

这样使用:
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;