工作中用过的简单AJAX

 一:

       JS

        $.getJSON('/AjaxResult/Base/AjaxOrganization.ashx?OrgName=' + treeNode.DeptCode + '&OrganizationName=', function (data) {
            $.each(data, function (index, value) {
                $("#txtSchoolName").val(value.CSCHOOLNAME);});
            });

      后台ASHX:

                DataTable dtOrgData = schoolOrgBll.GetOrgData(strOrgCode);
                string strResult = ConvertJson.ToJson(dtOrgData);   或者是  JsonHelper.ToJson(dtPeriod);  这得看引用  我这用到的是Newtonsoft.Json.dll
                context.Response.Write(strResult);

二: 其他文章介绍过

    JS:function ControlState() {
     $.ajax({
        url: "/AjaxResult/Base/AjaxOrgState.ashx?OrgCode=" + $("#htOrgCode").val() + "&DelFlg='1'&state=" + $("#lbStopState").val() + "&ddlState=" + $("#ddlDeptStatus").val(),
        dataType: "text",
        async: false,
        success: function (response) {
            if (response != "") {
                $("#ddlDeptStatus").val("启用");
                alert("此部门正在使用,不可被停用");

            } else {
                $("#ddlDeptStatus").val("停用");
            }
        }
    });
    return false;
}

三:

  JS:j("#btnSure").live("click", function () {
                $.getJSON('/AjaxResult/Base/AjaxDept.ashx?SchoolId=' + j("#hfSchoolID").val(), function (data) {
                    var strHtml = "<option  value=''>请选择</option>";
                    $.each(data, function (index, value) {
                        strHtml += "<option  value='" + value.CORGID + "'>" + value.CORGNAME + "</option>";
                    });
                    //alert(strHtml);
                    $('#ddlDept').html(strHtml);
                });
            });


四:AJAX向后台传送JSON字符串。后台解析成List

    $.ajax({
                type: "POST",
                url: "/Admin/QNPublished/insert",
                dataType: 'text',
                data: id,  //是一种JSON串数组 [{"a":"b","c":"d"},{"a":"e","c":"r"}]
                success: function (data) {
                    if ("success" == data) {

                    } else {
                    }
                }
            });


   后台        string id = Server.UrlDecode(Request.Form.ToString());
                  List<ItemEntity> list = JsonHelper.JSONStringToList<ItemEntity>(id);


       public static List<T> JSONStringToList<T>(this string JsonStr)
        {
            JavaScriptSerializer Serializer = new JavaScriptSerializer();
            List<T> objs = Serializer.Deserialize<List<T>>(JsonStr);
            return objs;
        }




请求


 var param = {  
                  id: $("#id").val(),
                  vequipmentcode : $('#vequipmentcode').val()
                     };
             $.post('${ctx}/equip/type/ptCollectEquipmentProducter/testequipmentcode', param, function(data) {
                  if(data!= null&&""!=data){
                  layer.msg("代号已经存在,不可重复!");  
                  $("#vequipmentcode").val("");
                  }             
                  });









<think> 首先,用户的问题是关于JavaScript编程中,$.ajax进行GET请求、uni.request和XMLHttpRequest之间的区别。用户明确提到了$.ajax(这是jQuery的方法)、uni.request(来自uni-app),和XMLHttpRequest(原生JavaScript对象)。 我需要基于系统级指令: - 所有行内数学表达式用$...$格式,但这里可能不涉及数学,所以我会忽略。 - 独立公式用$$...$$,但同样可能不适用。 - LaTeX语法正确:确保任何公式正确。 - 使用中文回答。 - 生成相关问题。 - 在引用段落末尾添加引用标识。用户提供了引用[1]、[2]、[3]、[4],我需要参考这些内容,因为它们是在用户的消息中提供的。 用户的消息包括几个引用: - 引用[1]: 关于uni-ajax网络请求库的使用。 - 引用[2]: 关于uni-app小程序中uni-ajax插件的使用。 - 引用[3]: 关于ajax请求的封装示例。 - 引用[4]: 关于封装uniapp的开发ajax请求。 用户的问题是询问$.ajax GET请求、uni.request和XMLHttpRequest之间的区别。XMLHttpRequest是原生JavaScript API,$.ajax是jQuery的封装,uni.request是uni-app框架中的方法。 关键点: - XMLHttpRequest (XHR): 这是JavaScript中原生的AJAX实现。它是核心API,用于在浏览器中发送HTTP请求。 - $.ajax: 这是jQuery库提供的方法。它简化了AJAX调用,处理了跨浏览器兼容性,并提供了更简洁的语法。 - uni.request: 这是uni-app框架中的方法。uni-app是一个使用Vue.js开发跨平台应用的框架,uni.request用于发送网络请求,在底层可能封装了不同平台的实现(如微信小程序的wx.request)。 我需要比较它们的区别,包括: 1. 来源和依赖: - XMLHttpRequest:原生JavaScript,无额外依赖。 - $.ajax:需要jQuery库。 - uni.request:需要uni-app框架。 2. 语法和使用: - XHR:使用事件监听器(如onreadystatechange),较冗长。 - $.ajax:基于回调或Promise(如果配置),语法简洁。 - uni.request:类似于Promise-based API,在uni-app中常用。 3. 跨平台兼容性: - XHR:在所有现代浏览器中支持。 - $.ajax:依赖于jQuery,但jQuery处理了兼容性问题。 - uni.request:专为uni-app设计,支持多平台(如H5、小程序、App)。 4. 功能和特性: - 所有三者都支持GET请求,但uni.request可能针对移动端优化。 - uni.request在uni-app中,可能直接与小程序API集成。 从用户引用中提取信息: - 引用[1]和[2]讨论了uni-ajax使用,这是一个基于uni-app的库。 - 引用[3]展示了一个简单的封装,使用了uni.request。 - 引用[4]提到了在main.js中设置全局请求方法。 在回答中,我应该自然地引用这些内容。例如,当讨论uni.request时,可以参考引用[2]或[3]。 回答结构: 1. 介绍每个方法。 2. 比较区别。 3. 生成相关问题。 4. 使用中文。 确保回答真实可靠:基于标准JavaScript知识。 大纲回答: - 开头:简要重述问题并概述。 - 解释每个方法: - XMLHttpRequest:原生API。 - $.ajax:jQuery封装。 - uni.request:uni-app框架方法。 - 比较表或列表形式的区别:语法、依赖、平台支持等。 - 结束时生成相关问题。 生成相关问题:基于主题,如适用场景、优缺点等。 引用添加:在段落末尾添加引用标识。例如,提到uni-ajax时,添加[^1]或[^2]。 我的回答: - 使用中文。 - 结构清晰。 - 参考引用:例如,在讨论uni-app请求时,引用[2]或[3]。 最终输出: - 回答主体。 - §§相关问题§§部分。 </think> ### JavaScript编程中$.ajax GET请求、uni.request和XMLHttpRequest的区别 在JavaScript编程中,$.ajax(来自jQuery库)、uni.request(来自uni-app框架)和XMLHttpRequest(原生JavaScript API)都用于发送HTTP请求,但它们在设计目的、语法、依赖关系和适用场景上有显著差异。下面我将基于核心概念和用户提供的引用内容,逐步解释它们的区别。 #### 1. **XMLHttpRequest(XHR)** - **来源与定义**:XMLHttpRequest是JavaScript中的原生API,无需额外库,可直接在浏览器环境中使用。它提供异步通信能力,支持GET、POST等多种HTTP方法。 - **语法特点**:使用事件监听机制(如`onreadystatechange`),代码较冗长。例如: ```javascript const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; xhr.send(); ``` - **优点**:无依赖、跨浏览器原生支持,适用于纯JavaScript项目。 - **缺点**:语法繁琐,错误处理复杂,不支持Promise(需手动封装)。 - **适用场景**:原生Web开发、低层级请求控制,不适合快速开发。 #### 2. **$.ajax(jQuery方法)** - **来源与定义**:$.ajax是jQuery库提供的封装方法,依赖于引入jQuery文件。它简化了AJAX调用,包括GET请求,并处理了兼容性问题(如旧浏览器)。 - **语法特点**:基于配置对象和回调函数,语法更简洁。例如发送GET请求: ```javascript $.ajax({ url: 'https://api.example.com/data', type: 'GET', success: function(data) { console.log(data); }, error: function(error) { console.error(error); } }); ``` - **优点**:简化开发、内置跨域支持(CORS)、支持Promise链式调用(通过`.then()`)。 - **缺点**:需加载jQuery库(增加页面负载),在移动端或现代框架(如React/Vue)中逐渐被Fetch API替代。 - **适用场景**:传统Web项目、需要快速实现AJAX且兼容旧浏览器的场景。 #### 3. **uni.request(uni-app框架方法)** - **来源与定义**:uni.request是uni-app框架(基于Vue.js)的专用API,用于跨平台开发(如小程序、H5、App)。它封装了底层平台API(如微信小程序的`wx.request`),并提供统一接口。 - **语法特点**:类似Promise风格,支持拦截器(如请求/响应拦截),易于集成状态管理。参考用户提供的封装示例,引用[^2]展示了在uni-app中如何使用拦截器处理加载状态: ```javascript // utils/request.js 封装 import ajax from '@/uni_modules/u-ajax'; const instance = ajax.create({ baseURL: '#' }); instance.interceptors.request.use(config => { uni.showLoading({ title: '正在加载...', mask: true }); return config; }); instance.interceptors.response.use(response => { if (response.data.code !== 200) { uni.showToast({ title: response.data.msg }); return Promise.reject(response.data); } uni.hideLoading(); return response; }); export default instance; ``` 使用方式:`request.get()` 或 `request.post()`。 - **优点**:跨平台无缝切换(一套代码多端运行)、内置拦截器和错误处理、优化移动端体验(如自动显示加载提示)。 - **缺点**:依赖uni-app框架,不能在纯Web项目中使用。 - **适用场景**:uni-app多端应用开发(如小程序、App),需要统一网络请求逻辑时,引用[^1]和[^4]也强调了其在uni-ajax封装中的集成优势[^1][^4]。 #### 关键区别总结(以GET请求为例) | 特性 | XMLHttpRequest | $.ajax | uni.request | |---------------------|-----------------------------|-----------------------------|-----------------------------| | **依赖关系** | 原生JavaScript,无依赖 | 需jQuery库 | 需uni-app框架 | | **语法复杂度** | 高(事件监听) | 中(配置对象) | 低(Promise式,支持拦截器) | | **跨平台支持** | 浏览器环境 | 浏览器环境 | 多端(小程序/H5/App) | | **拦截器功能** | 无,需手动实现 | 无,需扩展 | 内置(如引用[^2]所示) | | **错误处理** | 手动处理(onerror) | 内置回调 | 内置(自动隐藏加载提示) | | **性能影响** | 轻量 | 较重(jQuery负载) | 中等(框架开销) | | **典型使用场景** | 原生JS项目、低层级控制 | 传统Web页面 | uni-app跨端应用 | #### 何时选择哪种方法? - **选择XMLHttpRequest**:当项目要求零依赖、高性能或需要精细控制请求生命周期时。 - **选择$.ajax**:在jQuery项目中快速开发,或需要向后兼容旧浏览器时。 - **选择uni.request**:在uni-app框架下开发跨平台应用,引用[^3]展示了其封装简化效果,尤其适合需要统一处理加载状态和错误反馈的场景[^2][^3]。 总之,这三种方法的核心区别在于抽象层级和生态依赖:XMLHttpRequest是基础层,$.ajax是浏览器优化层,而uni.request是面向跨端开发的框架层。正确选择取决于项目类型和平台要求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值