JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例_javascript技巧

来源：动视网责编：小采时间：2020-11-27 21:46:51

JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例_javascript技巧

JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例_javascript技巧:javascript版本的ajax发送请求（1）、创建XMLHttpRequest对象，这个对象就是ajax请求的核心，是ajax请求和响应的信息载体，单是不同浏览器创建方式不同（2）、请求路径（3）、使用open方法绑定发送请求（4）、使用send() 方法发送请求（5）、

推荐度：

点击下载本文 文档为doc格式

导读JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例_javascript技巧:javascript版本的ajax发送请求（1）、创建XMLHttpRequest对象，这个对象就是ajax请求的核心，是ajax请求和响应的信息载体，单是不同浏览器创建方式不同（2）、请求路径（3）、使用open方法绑定发送请求（4）、使用send() 方法发送请求（5）、

javascript版本的ajax发送请求

（1）、创建XMLHttpRequest对象，这个对象就是ajax请求的核心，是ajax请求和响应的信息载体，单是不同浏览器创建方式不同

（2）、请求路径

（3）、使用open方法绑定发送请求

（4）、使用send() 方法发送请求

（5）、获取服务器返回的字符串 xmlhttpRequest.responseText;

（6）、获取服务端返回的值，以xml对象的形式存储 xmlhttpRequest.responseXML;

（7）、使用W3C DOM节点树方法和属性对该XML文档对象进行检查和解析。

序言：

近来随着项目的上线实施，稍微有点空闲，闲暇之时偶然发现之前写的关于javascript原生xmlHttp ajax方法以及后来jquery插件ajax方法，于是就行了一些总结，因时间原因，并未在所有浏览器上进行测试，目前测试的IE8,9,10，Google Chrome，Mozilla Firefox，Opera常用几款，如大家在进行验证测试发现有问题，请及时反馈与我，谢谢大家。

言归正传，直接上代码：

前端代码




 Ajax练习
 
 



 html5表单元素
 E-mail

 URL:

 Number:

 Range:

 Date:

 Search:

 

 
 
 
 
 
 
 
.NET技术交流群：70895254，欢迎大家
 
 //基础数据
 var jsonData = {
 UserEmail: $("#UserEmail").val(),
 UserURL: $("#UserURL").val(),
 UserNumber: $("#UserNumber").val(),
 UserRange: $("#UserRange").val(),
 UserDate: $("#UserDate").val(),
 UserSearch: $("#UserSearch").val()
 };
 //统一返回结果处理
 function Data(data, type) {
 if (data && data.length > 0) {
 var lblMsg = "";
 for (i = 0; i < data.length; i++) {
 for (var j in data[i]) {
 lblMsg += j + "：" + data[i][j];
 if (j != "Name" && j != "UserSearch") { lblMsg += "，" }
 }
 if (i != data.length) { lblMsg += "；"; }
 }
 $("#lblMsg").html(type + "请求成功，返回结果：" + lblMsg);
 }
 }
 
 
 //javascript 原生ajax方法
 function createXMLHttp() {
 var XmlHttp;
 if (window.ActiveXObject) {
 var arr = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp"];
 for (var i = 0; i < arr.length; i++) {
 try {
 XmlHttp = new ActiveXObject(arr[i]);
 return XmlHttp;
 }
 catch (error) { }
 }
 }
 else {
 try {
 XmlHttp = new XMLHttpRequest();
 return XmlHttp;
 }
 catch (otherError) { }
 }
 } 
 function xmlPost() {
 var xmlHttp = createXMLHttp();
 var queryStr = "Ajax_Type=Email&jsonData=" + JSON.stringify(jsonData);
 var url = "/Handler/AjaxHandlerHelper.ashx?no.=" + Math.random();
 xmlHttp.open('Post', url, true);
 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 xmlHttp.send(queryStr);
 xmlHttp.onreadystatechange = function () {
 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
 var data = eval(xmlHttp.responseText);
 Data(data, "javascript原生xmlHttp");
 }
 }
 }
 
 
 //jquery $.ajax方法
 function Ajax() {
 $.ajax({
 url: "/Handler/AjaxHandlerHelper.ashx?no.=" + Math.random(),
 type: "Post",
 async: false,
 data: {
 Ajax_Type: "Email",
 jsonData: JSON.stringify(jsonData)
 },
 dataType: "json",
 beforeSend: function () { //发送请求前 
 $("#btnPost").attr('disabled', "true");
 },
 complete: function () { //发送请求完成后
 $("#btnPost").removeAttr("disabled");
 },
 error: function (XMLHttpRequest, textStatus, errorThrown) {
 alert("error!" + errorThrown);
 //alert("请求错误，请重试！");
 },
 success: function (data) {
 Data(data, "Jquery $.ajax");
 }
 });
 }
 //jquery $.post方法
 function Post() {
 $.post("/Handler/AjaxHandlerHelper.ashx?no.=" + Math.random(),
 {
 Ajax_Type: "Email",
 jsonData: JSON.stringify(jsonData)
 },
 function (data) {
 Data(data, "Jquery $.post");
 }
 );
 }
 //jquery $.getJSON方法
 function GetJSON() {
 $.getJSON("/Handler/AjaxHandlerHelper.ashx?no.=" + Math.random(),
 {
 Ajax_Type: "Email",
 jsonData: JSON.stringify(jsonData)
 },
 function (data) {
 Data(data, "Jquery $.getJSON");
 }
 );
 }
 //jquery $.get方法
 function Get() {
 $.get("/Handler/AjaxHandlerHelper.ashx?no.=" + Math.random(),
 {
 Ajax_Type: "Email",
 jsonData: JSON.stringify(jsonData)
 },
 function (data) {
 Data(data, "Jquery $.get");
 }
 );
 }