`

1、使用XMLHttpRequest对象——ajax基础笔记

阅读更多

XMLHttpRequest最早是在 IE5 中以activeX组件形式实现。XMLHttpRequest并不是一个W3C标准。

IE所XMLHttpRequest实现为一个ActiveX对象,其他浏览器把它实现为一个本地JavaScript对象。

创建XMLHttpRequest对象

var xmlHttp;
function createXMLHttpRequest() {
	if (window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		if (window.XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
		}
	}
}

XMLHttpRequest方法和属性

  • 标准XMLHttpRequest操作

  • abort()——停止当前请求
  • getAllResponseHeaders()——把HTTP请求的怕有响应首部作为键/值对返回
  • getResponseHeader('header')——返回指定首部的串值
  • open('method','url')——建立对服务器的调用。method参数可以是GET、POST或PUT。url可以是相对URL或绝对URL。这个方法还包括3个可选
  • send(content)——向服务器发送请求
  • setRequestHeader('header','value')——把指定首部设置为所提供的值。在设置任何首部之前必须调用open()

void open(string method, string url, boolean asynch, string username, string password):第三个参数指示异步的还是同步的,默认值为true,表示请求本质上是异步的。如果这个参数为false处理会等待,直到从服务器返回响应为止。最后两个参数允许你指定一个特定的用户和密码。

void send(content):向服务器发送请求。如果请求声明为异步的,这个方法就会立即返回,否则直到接收到响应为止。参数可以是DOM对象的实例、输入流,或者串。体入这个方法的内容会作为请求体的一部分发送。

void setRequestHeader(string header, string value):这个方法为HTTP请求中一个给定的首部设置值。这个方法必须在调用open()之后才能调用

  • 标准 XMLHttpRequest属性

onreadystatechange——每个状态改变时都会触发这个处理器,通常会调用一个JavaScript函数

readyState——请求的状态,有5个可取值:0=未初始化,1=正在加载,2=已加载,3=交互中,4=完成

responseText——服务器的响应,表示为一个文本串

responseXML——服务器的响应,表示XML,这个对象可以解析为一个DOM对象

status——服务器HTTP状态码(200对应OK,404对应页面未找到,等等)

statusText——HTTP状态码的相应文本(OK或页面未找到等等)

服务器返回内容类型

服务器返回的内容要设置成text/xml、text/plain,因为XMLHttpRequest对象只能处理text/html类型的结果。

不缓存页面内容

使用浏览器不会在本地缓存结果,服务器端需设置以下HTTP头信息:

response.setHeader("Cache-Control","no-cache");

response.setHeader("Pragma","no-cache");

response.setHeader("EXpires",0);

 

客户端JavaScript设置:

request.setRequestHeader("Cache-Control","no-cache");
request.setRequestHeader("Pragma","no-cache");
request.setRequestHeader("EXpires",0);

回调方法通常写法

function callback(){
  if(xmlHttp.readyState == 4){
    if(xmlHttp.status == 200){
      //do something interesting here
    }
  }
}

POST方式请求头所需设置

xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

 

  • 大小: 13.9 KB
  • 大小: 3.4 KB
  • 大小: 7.4 KB
分享到:
评论

相关推荐

    7、使用JSON向服务器发送数据——ajax基础笔记

    在“使用JSON向服务器发送数据——ajax基础笔记”这个主题中,我们首先会了解如何创建一个XMLHttpRequest对象。在JavaScript中,你可以通过`new XMLHttpRequest()`来实例化一个对象,然后利用它的方法如`open()`、`...

    web学习笔记 —— javascript基础

    这篇“web学习笔记——javascript基础”将带你走进JavaScript的世界,理解其基本概念和常用语法。 JavaScript语法基础: 1. 变量:在JavaScript中,变量用于存储数据。声明变量使用`var`关键字,例如`var myVar = ...

    Ajax中XmlHttpRequest实例笔记

    核心在于使用JavaScript与服务器进行异步数据交换,并且利用浏览器内置的对象——XmlHttpRequest(XHR)来实现这一过程。在本笔记中,我们将深入探讨XmlHttpRequest在Ajax中的应用实例,以及如何结合jQuery库进行更...

    老男孩第20周视频教程笔记

    在“老男孩第20周视频教程笔记”中,我们主要关注的是前端开发的一个关键话题——AJAX(异步JavaScript和XML)。AJAX是一种在不重新加载整个网页的情况下,能够更新部分网页的技术,极大地提升了用户体验。它通过...

    SSH应用sqlserver和Oracle和Ajax和java基础

    JavaScript通过XMLHttpRequest对象实现异步通信,虽然名称中含有XML,但实际应用中更多地使用JSON格式传递数据。 4. Java基础知识: - 类与对象:Java是一种面向对象的语言,通过定义类来创建对象,类包含了数据...

    PHP实例开发源码——PHP FexBook v1.0 Beta.zip

    8. **AJAX异步通信**:为了提升用户体验,FexBook可能利用JavaScript(可能结合jQuery库)和XMLHttpRequest对象实现了部分页面的异步更新,减少不必要的页面刷新。 9. **错误日志与调试**:为了追踪和修复问题,...

    Promise笔记发布 (1).txt

    ### Promise基础知识详解 #### 一、Promise的基本概念 在JavaScript中,`Promise`是一个非常重要的概念,用于处理异步操作。传统的异步编程方法(如回调函数)可能会导致代码难以维护,这种现象被称为“回调地狱”...

    ajax php 实现写入数据库

    `getValue()`函数获取表单中的值,`submit()`函数创建XMLHttpRequest对象(即Ajax的核心),设置请求方法为POST,URL为`insert1.php`,并附带上表单数据。`GetXmlHttpObject()`函数用于兼容不同的浏览器,创建...

    NoteTaker

    《NoteTaker——基于JavaScript的笔记应用开发详解》 NoteTaker是一款简洁高效的在线笔记应用,它充分利用了JavaScript的强大功能,为用户提供了一个便捷的记录、管理和检索信息的平台。在这个项目中,我们将深入...

    Docket-App:笔记本Web应用程序

    通过XMLHttpRequest对象,JavaScript可以向服务器发送请求,并在后台接收数据,然后动态更新DOM(文档对象模型),从而提高用户体验。 3. **本地存储**:考虑到Web应用的数据持久化,Docket-App可能会使用HTML5的...

    tool:个人代码库及日常工作中的笔记

    4. **AJAX**:使用XMLHttpRequest或fetch API进行异步数据请求,实现页面的无刷新更新。 5. **框架与库**:可能包含了使用React、Vue、Angular等JavaScript框架编写的应用示例,或者jQuery等库的用法。 6. **ES6及...

    aprendendo-mais-de-[removed]我会从javascript写下一些东西进行研究

    1. **基础语法**:介绍变量声明(var、let、const)、条件语句(if...else、switch)、循环(for、while、do...while)、数组、字符串、对象等基本概念。 2. **函数**:深入探讨函数的使用,包括箭头函数、函数...

    jQuery 源码分析笔记(5) jQuery.support

    - ajax:检测浏览器是否支持原生的`XMLHttpRequest`对象。 - boxModel:确定浏览器是否遵循W3C CSS盒模型。 - changeBubbles:检测`change`事件是否会在DOM树中冒泡。 - checkClone:检测克隆单选框或复选框时是否...

    notes

    【笔记——探索JavaScript的世界】 在IT领域,JavaScript是一种不可或缺的编程语言,特别是在Web开发中扮演着核心角色。本文将深入探讨JavaScript的相关知识点,帮助你更好地理解和掌握这一强大的工具。 一、...

Global site tag (gtag.js) - Google Analytics