ajax XMLHttpRequest五步使用法

简介: 1.建立XMLHttpRequest对象2.注册回调函数3.使用open方法设置和服务器交互的基本信息4.

1.建立XMLHttpRequest对象

2.注册回调函数

3.使用open方法设置和服务器交互的基本信息

4.设置发送的数据,开始和服务器进行交互

5.在回调函数中判断交互是否结束,响应是否正确,并根据需要获取服务器端返回的数据,更新页面内容

 

二.方法和属性

open(String method,String url, boolean asynch, String username, String password)

method表示HTTP请求方法,GET和POST

2.URL表示服务器的地址

3.是否异步方式 true异步,false同步

4.username,password提供HTTP认证机制所需要的用户和密码

 

send(content)

发送服务器的内容

GET为null

POST为数据,内容是DOM,输入流或者是字符串

 

setRequestHeader(String header, String value)

设置HTTP请求的Header头部

 

getAllResponseHeaders()

获取所有头信息

 

getResponseHeader(String header);

abort()

停止当前请求,他可以使对应的XMLHttpRequest对象复位到未初始化的状态

 

属性:

readyState

0 = 未初始化,对象已经创建,未调用open

1 = open方法成功调用后send方法未调用

2 = send已经调用,尚未开始接受数据

3 = 正在接受数据

4 = 完成

 

onreadystatechange

请求状态改变的事件触发器(readyState每次变化时都会调用这个属性上注册的javascript函数)

 

status

HTTP响应的状态值200,403,404等。

 

responseText

文本内容

 

responseXML

xml对应的DOM对象

 

statusText

文本信息

 

目录
相关文章
|
Web App开发 JavaScript 前端开发
前端接收数据流实现图片预览效果--ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践
本文为转载文章 原文链接:https://www.cnblogs.com/cdemo/p/5225848.html 首先要谢谢这位大神的无私贡献!解决了我的问题也完美表达了我当时的心路历程 ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践 写在前面 :从提出需求到完美的解决问题,实现过程是曲折的。
8110 0
|
5月前
|
前端开发 JavaScript API
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
57 0
|
7月前
|
XML 前端开发 JavaScript
AJAX - 创建 XMLHttpRequest 对象
AJAX - 创建 XMLHttpRequest 对象
|
7月前
|
XML 前端开发 JavaScript
AJAX - 创建 XMLHttpRequest 对象
AJAX - 创建 XMLHttpRequest 对象
|
7月前
|
XML JSON 前端开发
AJAX 中创建 XMLHttpRequest 对象的方法和常用属性、方法
AJAX 中创建 XMLHttpRequest 对象的方法和常用属性、方法
83 0
|
XML 前端开发 JavaScript
AJAX - 创建 XMLHttpRequest 对象
AJAX(异步JavaScript和XML)是一种在Web应用程序中创建快速动态更新的技术。使用AJAX,Web应用程序可以异步地向服务器发送和接收数据,而无需刷新整个页面。 AJAX广泛用于Web应用程序中,包括社交媒体,电子商务,在线游戏等等。 XMLHttpRequest 是AJAX中最重要的对象。它可以向服务器发送请求并接收响应。
|
前端开发 JavaScript
ajax方法执行同步的黄色警告:Synchronous XMLHttpRequest on the main thread is deprecated的解决方案
ajax方法执行同步的黄色警告:Synchronous XMLHttpRequest on the main thread is deprecated的解决方案
273 0
|
Web App开发 XML 存储
【AJAX】对于AJAX 解析已经XMLHttpRequest对象对于异步的操作等等在项目中的体验
【AJAX】对于AJAX 解析已经XMLHttpRequest对象对于异步的操作等等在项目中的体验
125 0
【AJAX】对于AJAX 解析已经XMLHttpRequest对象对于异步的操作等等在项目中的体验
|
XML JSON 前端开发
Java学习路线-47:Ajax学习XMLHttpRequest、XStream、json-lib(3)
Java学习路线-47:Ajax学习XMLHttpRequest、XStream、json-lib
159 0
|
XML JSON 前端开发
Java学习路线-47:Ajax学习XMLHttpRequest、XStream、json-lib(2)
Java学习路线-47:Ajax学习XMLHttpRequest、XStream、json-lib
169 0