Error[8]: Undefined index: create_date_text, File: /www/wwwroot/www.173yn.com/tmp/view_htm_header.inc.htm, Line: 27
File: /www/wwwroot/www.173yn.com/tmp/view_htm_read.htm, Line: 1, include(/www/wwwroot/www.173yn.com/tmp/view_htm_header.inc.htm)
File: /www/wwwroot/www.173yn.com/tmp/route_read.php, Line: 142, include(/www/wwwroot/www.173yn.com/tmp/view_htm_read.htm)
File: /www/wwwroot/www.173yn.com/tmp/index.inc.php, Line: 87, include(/www/wwwroot/www.173yn.com/tmp/route_read.php)
File: /www/wwwroot/www.173yn.com/index.php, Line: 29, include(/www/wwwroot/www.173yn.com/tmp/index.inc.php)
"/> AJAX 核心 —— XMLHTTPRequest 对象 回顾记录

AJAX 核心 —— XMLHTTPRequest 对象 回顾记录

dayu 2020-11-21   7

AJAX 概述

  不使用 AJAX 的网页,如果要更新内容,需要重载整个页面。

  AJAX ( Asynchronous Javascript And XML ,异步 Javascript 和 XML)用于异步通讯,通过在后台与服务器进行少量的数据交换,在不重载整个网页的情况下,对网页局部实现异步刷新。

AJAX 核心

  JavaScript 中使用 XMLHTTPRequest 对象(XHR)实现 AJAX 请求。

AJAX 步骤

  一般步骤如下:

  1. 实例化 XMLHTTPRequest 对象(注意 IE 兼容性)
  2. 绑定监听事件(onreadystatechange 属性,判断就绪用 readState 属性 == 4,判断响应成功用 status 属性 == 200,获取响应用 responseText 或 responseXML 属性。
  3. 建立请求(open() 方法,注意最后一个参数为ture(因为是 AJAX ))
  4. 设置请求头(setRequestHeader() 方法,仅限于POST)
  5. 发送请求(send() 方法,POST 请求时在 send() 方法添加提交参数)

AJAX 代码
// 第一步,创建 XMLHTTPRequest 对象
var xhr = window.XMLHTTPRequest ? new XMLHTTPRequest() : new ActiveXObject(‘Microsoft.XMLHttp‘);

if(!xhr){
    alert(‘创建 XMLHTTPRequest 对象失败!‘);
    return false;
}

// 第二步,绑定回调函数
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4 && xhr.status = 200){ // 请求就绪 && 响应成功
        var data = xhr.responseText; // 如果是 XML 数据,就用 var data = xhr.responseXML 获取
        
        // DOM 操作
        // document.getElementById("myDiv").innerHTML = data;
    }
}

// 第三部,建立请求
xhr.open("POST", url, true); // 参数三默认为 true(异步),可以不填

// 第四步,设置请求头(仅限于POST)
xhr.setRequestHeader(‘Content-type‘, ‘application/x-www-form-urlencoded; charset-UTF-8‘);

// 第五步,发送请求
xhr.send(‘fname=michael&&lname=jordan‘); // POST请求的请求体

这里,强调以下四点(引用自廖雪峰的官方网站)

  1. 通过检测 window 对象是否有 XMLHttpRequest 属性来确定浏览器是否支持标准的XMLHttpRequest。注意,不要根据浏览器的 navigator.userAgent 来检测浏览器是否支持某个 JavaScript 特性,一是因为这个字符串本身可以伪造,二是通过IE版本判断JavaScript特性将非常复杂。

  2. 当创建了XMLHttpRequest对象后,要先设置onreadystatechange的回调函数。在回调函数中,通常我们只需通过readyState === 4判断请求是否完成,如果已完成,再根据status === 200判断是否是一个成功的响应。

  3. XMLHttpRequest 对象的 open() 方法有3个参数,第一个参数指定是 GET 或者 POST,第二个参数指定 URL 地址,第三个参数指定是否使用异步,默认是true,所以可以不写。注意,千万不要把第三个参数指定为false,否则浏览器将停止响应,直到AJAX请求完成。如果这个请求耗时10秒,那么10秒内你会发现浏览器处于“假死”状态。

  4. 最后调用 send() 方法才真正发送请求。GET 请求不需要参数,POST 请求需要把body部分以字符串或者FormData对象传进去。

jQuery 中的 AJAX

  直接用 JS 写 AJAX 步骤有些繁琐。jQuery 中封装了 AJAX 的快捷方法。

$.ajax(url,[settings])          // 执行异步 HTTP (Ajax) 请求
$(‘选择器‘).load(url,[data],[callback])	// 从服务器加载数据,把返回 HTML 放入匹配元素
$.get(url,[data],[fn],[type])	// GET 请求加载数据
$.getJSON(url,[data],[fn])	// GET 请求加载 JSON 编码数据
$.getScript(url,[callback])	// GET 请求 JavaScript 文件,并执行
$.post(url,[data],[fn],[type])	// POST 请求加载数据

  更多jQuery 的AJAX请参考jQuery 的中文手册,实例请参考jQuery Ajax 实例 ($.ajax、$.post、$.get)

推荐阅读:

廖雪峰的官方网站 - AJAX

【原创】说说JSON和JSONP,也许你会豁然开朗,含jQuery用例

跨域请求的几种实现方式

解决jquery load,get 方法缓存数据问题

AJAX 核心 —— XMLHTTPRequest 对象 回顾记录

原文地址:http://www.cnblogs.com/mingc/p/7208535.html


转载请注明原文地址: http://www.173yn.com/read/95501

最新回复 (0)

Processed Time:0.31257891654968

  • 0.0007 SELECT * FROM well_session WHERE `sid`='a9e5jlo8pgj19stfjk12rrcdf3' LIMIT 1
  • 0.0012 SELECT * FROM well_cache WHERE `k`='www.173yn.com_website' LIMIT 1
  • 0.0004 SELECT * FROM well_cache WHERE `k`='www.173yn.com_forumlist' LIMIT 1
  • 0.0004 SELECT * FROM well_cache WHERE `k`='www.173yn.com_setting' LIMIT 1
  • 0.0073 SELECT * FROM well_website_thread WHERE `tid`=95501 LIMIT 1
  • 0.0001 SELECT * FROM well_user WHERE `uid`=1 LIMIT 1
  • 0.0024 SELECT * FROM well_cache WHERE `k`='www.173yn.com_online_user_list' LIMIT 1
  • [0.0010]UPDATE LOW_PRIORITY `well_website_thread` SET views=views+1 WHERE tid='95501'
  • 0.0100 SELECT * FROM well_website_data WHERE `tid`=95501 LIMIT 1
_REQUEST:
Array
(
    [0] => read
    [1] => 95501
)
_SESSION:
Array
(
    [fid] => 4
)