jQuery的Ajax的responseText为undefined!

先扯一个故事吧:

早些时候我刚接触JavaWeb的时候,碰上了一个问题:以字符串形式在页面输出“您好中国hello”
开始我是这样写的:

response.getWriter().write("您好中国hello");

发现页面上是这样的:
在这里插入图片描述
这一看就是响应的编码格式问题了。
于是我查阅资料,改成了这样:

response.setCharacterEncoding("UTF-8");
response.getWriter().write("您好中国hello");

但是页面上是这样的:
在这里插入图片描述
这乍一看我就很懵逼了,因为按我查阅到的资料,关于响应的问题,只需在get里面(一般用get来接收)加入第一行代码,改变其编码即可。为什么错了? 我们文末再说。

我为什么放这个例子,因为最近我看到了一些问题:jQuery的Ajax的responseText为undefined!
你比如:

var tab = jQuery("#dynamic_tab");
var url = "/list_ajax/";
tab.load(url);

很简单对吧!ajax从后端接收其他页面的HTML代码。(说来也巧,最近刚刚写完一篇关于load的文章…)
但就是这段简单到不能再简单的代码,在Chrome,Firefox,Safari下运行一点问题也没有,只有IE不行,不管是IE7,IE8,还是IE9。问题的症状是,使用IE访问那个Ajax的链接,没有问题,但是在jQuery的Ajax方法返回了“undefined”的respons对象。没有任何报错!

上Google查了一下,发现解决千奇百怪,但都没有被打对勾(还未采用!),比如:有人说的IE缓存的问题,什么,要把cache设置成false,或是用下面的方法来解决:

var tab = jQuery("#dynamic_tab");
var fuckie = Math.random();
var url = "/list_ajax/"+"?fuckie="+fuckie;
tab.load(url);

诸如此类,试了好多,都差不多,无一例外地解决不了…
于是我用IE9的网页调试器,发现点了Ajax的链接后,IE对网站有http的Ajax请求,也可以看到请求返回了,但是就是不显示在我的页面上——jQuery的Ajax的responseText为undefined!
没有返回。
只能用原生JS重写一遍了:

function InitAjax()
{
    var ajax=false;
    try {
        ajax = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            ajax = false;
        }
    }
    if (!ajax && typeof XMLHttpRequest!='undefined') {
        ajax = new XMLHttpRequest();
    }
    return ajax;
}
 
var ajax = InitAjax();
ajax.open("GET", url, true);
ajax.onreadystatechange = function() {
    if (ajax.readyState == 4 && ajax.status == 200) {
        var show = document.getElementById("HaoChenDIV").value;
        show.innerHTML = ajax.responseText;
    }
}
ajax.send(null);

一运行,还是不行,没见IE报什么错,不过,可以确定这不是jQuery的问题了。调试中,在IE9下调式发现原生的IE的Ajax对象在onreadystatechange函数里,其responseText是下面这个样子:
在这里插入图片描述
什么是“系统错误: -1072896658”?上google一查,一堆页面,基本上是说乱码了,也就是ajax的后端程序返回的网页编码不认识吧。需要在返回的http header里加上 charset=utf-8。

于是,修改后端的Ajax的程序,明确指定了返回的HTTP Header中的charset,于是IE下就工作正常了,再切回jQuery的load代码,一切正常了。(后端的程序本来是utf-8的编码格式,但是不骨明确在HTTP Header中指定,但是只有IE不会自动检测)

那么,开头的那个问题也就迎刃而解了:

response.setHeader("Content-type", "text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
response.getWriter().write("您好中国hello");

在这里插入图片描述

### JavaScript AJAX 异步请求使用方法 #### 创建 XMLHttpRequest 对象 为了发起异步请求,首先需要创建一个 `XMLHttpRequest` 对象。这可以通过检测浏览器兼容性来完成: ```javascript function createXHR() { if (typeof XMLHttpRequest !== 'undefined') { return new XMLHttpRequest(); } else if (typeof ActiveXObject !== 'undefined') { // For IE6 and below if (typeof arguments.callee.activeXString !== 'string') { var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'], i, len; for (i = 0, len = versions.length; i < len; i++) { try { new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; } catch (ex) {} } } return new ActiveXObject(arguments.callee.activeXString); } else { throw new Error('No XHR object available.'); } } ``` 此代码片段展示了如何跨不同版本的浏览器创建 `XMLHttpRequest` 实例[^2]。 #### 发送 GET 请求 一旦有了 `XMLHttpRequest` 对象,就可以设置好回调函数并通过 `.open()` 方法指定 HTTP 方法(GET 或 POST),以及 URL 地址;最后调用 `.send()` 来实际发出请求: ```javascript var xhr = createXHR(); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) { console.log(xhr.responseText); // 处理服务器响应数据 } }; xhr.open('GET', '/example.php'); xhr.send(null); ``` 这段脚本说明了怎样构建并执行一次简单的 GET 请求。 #### 使用 jQuery 的 $.ajax 方法简化操作 对于更复杂的场景或者希望减少手动编写底层逻辑的工作量时,可以考虑利用库如 jQuery 提供更高层次抽象的方式——即其内置的 `$.ajax()` 函数。它不仅支持多种类型的请求(包括 JSONP 跨域请求),还提供了丰富的选项来自定义行为: ```javascript $.ajax({ url: "/test.html", context: document.body, }).done(function () { $(this).addClass("loaded"); }); ``` 上述例子中,`url` 参数指定了目标资源的位置,而 `context` 则允许改变上下文环境以便于后续链式调用中的 this 关键字指向特定 DOM 元素。`.done()` 是一种简便的方式来注册成功后的回调处理程序[^3]。 #### 并发多个 Ajax 请求 当有多个独立但又相互关联的任务需同时启动并且只有全部完成后才继续下一步骤的情况下,可借助 ES6 中引入的 Promise API 特别是 `Promise.all([])` 方法来管理这些并发任务的状态变化: ```javascript function request(url) { return new Promise((resolve, reject) => { const xhr = createXHR(); xhr.onload = function () { if (xhr.status >= 200 && xhr.status < 300) resolve(JSON.parse(xhr.response)); else reject(new Error(`Request failed with status ${xhr.status}`)); }; xhr.onerror = () => reject(new Error('Network error')); xhr.open('GET', url); xhr.send(); }); } const request1 = request('/api/data1.json'), request2 = request('/api/data2.json'); Promise.all([request1, request2]) .then(results => console.log('Both requests succeeded:', ...results)) .catch(error => console.error('One of the requests failed:', error.message)); ``` 这里展示了一个实用技巧,在面对多条路径依赖关系时能够更加优雅地控制流程走向[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

恪愚

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值