分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

ajax通信

发布时间:2023-09-06 02:03责任编辑:熊小新关键词:暂无标签

AJAX即Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),可以在不重新加载整个网页的基础上,对网页的某部分进行更新。

XMLHttpRequest 是 AJAX 的基础,用于在后台与服务器交换数据。

想要创建一个AJAX请求,分为以下几个步骤:

创建XMLHttpRequest对象-> open -> send ->处理响应

//创建Ajax对象var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP‘);//向服务器发送请求xhr.open(‘GET‘, ‘xxx.php‘, true); //async:true(异步)或 false(同步)xhr.send();/*post请求要先设置header再发送*/xhr.open("POST", "ajax_test.asp", true);xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xhr.send("fname=Bill&lname=Gates");//服务器响应xhr.onreadystatechange = function () { ???if (xhr.readyState == 4) {//readyState==4表示后台处理完成了 ???????if (xhr.status == 200 || (xhr.status == 304)) {//状态码为0是本地响应成果,200表示处理的结果是ok的 ???????????//判断异步调用是否成功,如果成功开始局部更新数据 ???????????var res = xhr.responseText; ???????} else { ???????????alert("出错状态码:" + xhr.status + "出错信息:" + xhr.statusText); ???????} ???}}
XMLHttpRequest对象方法:
方    法描    述
abort()停止当前请求 
getAllResponseHeaders()把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")返回指定首部的串值
open("method","URL",[asyncFlag],["userName"],["password"]) 
建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数,是否异步,用户名,密码
open方法并不会真正发送请求,只是会启动一个请求以备发送
send(content)向服务器发送请求
setRequestHeader("header", "value")
把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 (‘post‘方法一定要 )
必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()

XMLHttpRequest 对象属性描述

  属  性描    述
onreadystatechange状态改变的事件触发器,每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数
readyState
请求的状态。有5个可取值:
0 = 未初始化。尚未调用open()方法
1 = 启动 已经调用open()方法,但尚未调用send()方法
2 = 已加载/发送,已经调用send()方法,但尚未接收到响应
3 = 交互中/接收,已经接收到部分响应数据
4 = 完成。已经接收到全部响应数据,而且已经可以在客户端使用了。
responseText服务器的响应,返回数据的文本。
responseXML服务器的响应,返回数据的兼容DOM的XML文档对象 ,这个对象可以解析为一个DOM对象。
responseBody 服务器返回的主题(非文本格式)
responseStream服务器返回的数据流
status服务器的HTTP状态码(如:404 = "文件末找到" 、200 ="成功" ,等等)
statusText服务器返回的状态文本信息 ,HTTP状态码的相应文本(OK或Not Found(未找到)等等)

参考资料 http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp

ajax通信

原文地址:https://www.cnblogs.com/jingmi-coding/p/9277783.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved