建立AJAX通信的步骤

原创 2013年12月05日 10:15:25

步骤一:创建XMLHttpRequest对象

XMLHttpRequest对象是Ajax的应用的基础,所有主流浏览器的支持该对象。IE7开始提供对XMLHttpRequest对象的支持。

function CreateRequestObject() {
		var ajaxRequest;
		try {
			ajaxRequest = new XMLHttpRequest();
		} catch (e) {
			try {
				ajaxRequest = new ActiveXObject('Msxm12.XMLHTTP');
			} catch (e) {
				try {
					ajaxRequest = ActiveXObject('Microsoft.XMLHTTP');
				} catch (e) {
					return false; 
				}
			}
		}
		return ajaxRequest;
	}


根据浏览器的不同创建XMLHttpRequest对象。

XMLHttpRequest 的主要属性有与方法:

stauts 请求响应头的HTTP状态码,例如200或400
statusText 状态码的字符串形式
readyState 当前对象状态的数字
responseText 服务器返回的字符串信息
responseXML 服务器返回的xml
onreadystatechange 当readyState状态改变时调用的事件处理函数
onerror 发生错误时当用的函数
onprogress 内容加载中调用的函数
onload 内容加载完调用的
方法  
abort()  
getAllResponseHeaders()  
getResponseHeader('ser')  
open(‘post/get’, url, bool) 等初始化XMLHttpRequest对象
send() 发送请求
setRequestHeader()  















步骤二:初始化XMLHttpRequest对象,并向服务器发送请求。

//GET
ajaxRequest.open('GET', 'url?param=' + paramvalue, true);//true代表异步响应,不锁定屏幕。false代表同步,要等到服务器返回结构才能继续操作
ajaxRequest.send();

//POST
ajaxRequest.open('POST', 'url', true);
ajaxRequest.send('param='+paramvalue); //用于传递post方法的参数,如果没有就传递null

步骤三:监控服务器相应状态

要监控服务器状态应该给XMLHttpRequest对象的onreadystatechange事件处理函数赋予函数,该函数会在readyState状态改变时被触发。

ajaxRequest.onreadystatechange = function() {
			if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200) { //当readyState为4 且status为200时,表示请求成功
				document.getElementById('message').innerHTML = ajaxRequest.responseText;
			}
		}



创建Ajax过程

Ajax的全称是Asynchronous JavaScript and XML ,其中Asynchronous 是异步的意思,它又别于传统的Web开发采用的同步的方式。Ajax并非一种新的技术,而是几...
  • I_intern
  • I_intern
  • 2016年12月27日 22:24
  • 706

AJAX(一)-实现服务端客户端异步通信

AJAX概念:客户端与服务端,可以在[不刷新整个浏览器]的情况下,与服务器进行异步通信的技术。即ajax是一个[局部刷新]的异步通信技术,AJAX不是全新的语言,时2005年谷歌公司提出的一种全新的编...
  • u010281209
  • u010281209
  • 2016年12月08日 18:05
  • 1559

Ajax通信步骤

(一)创建XMLHttpRequest对象: 重要属性有:status、statusText、     function CreateRequestObject() {         var ...
  • qgmobile_conghua
  • qgmobile_conghua
  • 2012年07月19日 16:21
  • 1148

ajax理解与操作流程

1.对ajax的理解 异步javascript+xml 通过AJAX,使用JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象JavaScript可在不...
  • anlukun
  • anlukun
  • 2013年03月17日 00:22
  • 2024

创建ajax过程

AJAX=异步JavaScript+XML; ajax是一种无需重新加载整个网页情况下能够更新部分网页的技术。 简单描述: Ajax的原理简单来说通过XmlHttpRequest对象来向服务...
  • xiaguangzhiying
  • xiaguangzhiying
  • 2016年09月22日 17:01
  • 3191

SOCKET通信的基本步骤

SOCKET通信的基本步骤    1)建立一个服务器ServerSocket,并同时定义好ServerSocket的监听端口;    2)ServerSocket 调用accept()方法,使...
  • aidem_brown
  • aidem_brown
  • 2014年07月22日 22:40
  • 1055

基于ajax的通讯录简单小程序

  • 2016年12月23日 17:11
  • 2.22MB
  • 下载

ajax 的原理及实现步骤

原理: HTTP协议的异步通信 get 请求 1) 创建一个XMLHttpRequest对象 2) 调用该对象的open方法 3) 如果是get请求,设置回调函数onreadystatecha...
  • mrm2830100
  • mrm2830100
  • 2014年04月02日 23:42
  • 3237

spring mvc 与前端ajax通信

解决ajax跨域操作ajax与spring通信中,json字符串和js对象及java对象之间的转化。 前端和后端分离是一种趋势,但前端和后端的通信,其实大多由ajax来承担。 ...
  • doctor_who2004
  • doctor_who2004
  • 2015年09月27日 20:07
  • 1288

实现AJAX的基本步骤

要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:       (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.       (2)创建一个新的HTT...
  • evilemon
  • evilemon
  • 2015年07月09日 11:13
  • 1553
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:建立AJAX通信的步骤
举报原因:
原因补充:

(最多只允许输入30个字)