ajax快速入门

本文介绍了Ajax的基础,通过同步异步交互图解析Ajax的工作原理,并详细阐述了Ajax的四个步骤:创建XMLHttpRequest对象、打开连接、发送请求及处理响应。适合初学者快速入门。
摘要由CSDN通过智能技术生成

一、ajax简介

在这里插入图片描述

二、同步异步交互图

在这里插入图片描述

三、ajax四步

1.第一步(得到XMLHttpRequest)
–ajax其实只需学习一个对象,XMLHttpRequest,如果掌握了他,就掌握了ajax!!
–得到XMLHttpRequest
大多数浏览器都支持:var xmlHttp=new XMLHttpRequest();
IE6.0: var xmlHttp=new ActionXObject(“Msxml2.XMLHTTP”);
IE5以前更早的版本的IE: var xmlHttp=new ActionXObject(“Micrisoft.XMLHTTP”);

—编写创建XMLHttpRequest对象的函数

function createXMLHttpRequest(){
	try{
		return new XMLHttpRequest();
	}catch(e){
		try{
			return new ActionXObject(Msxml2.XMLHTTP);
		}catch(e){
			try{
				return new ActionXObject(Micrisoft.XMLHTTP);
			}catch(e){
				alert("哥们,你用的什么浏览器啊?");
				throw e; 
			}
		}
	}
}

2.第二步(打开与服务器的连接)
—xmlHttp.open();用来打开与服务器的连接,他需要三个参数:

请求方式:可以是GET或者POST
请求的URL:指定服务器端资源,例如:/day23/AServlet
请求是否为异步,如果为true表示发送异步请求
—xmlHttp.open(“GET”,“day23/AServlet”,true);

3.第三步(发送请求)
–xmlHttp.send(null);如果不给可能会造成部分浏览器无法发送!

参数:就是请求体内容,如果是GET请求,必须给出null;

4.第四步()
—在xmlHttp对象的一个事件上注册监听器:onreadystatechange

—xmlHttp对象一共有5个状态

0状态:刚创建,还没有调用open()方法;
1状态:请求开始:调用了open()方法,但还没有调用send()方法 ;
2状态:调用完了send()方法了;
3状态:服务器已经开始响应,但不表示响应结束了1
4状态:服务器响应结束(通常我们只关心这个结束状态!!!!)

—得到xmlHttp 对象的状态:

var state=xmlHttp.readyState;//可能是0,1,2,3,4

—得到服务器响应的状态码

var status=xmlHttp.status;//例如wei200,404,500

—得到服务器响应的内容

var content=xmlHttp.responseText;// 得到服务器的响应文本格式的内容
var content=xmlHttp.responseXML;//得到服务器的响应的xml响应的内容,他是Document对象了;

xmlHttp.onreadystatechange=function(){//xmlHttp的 5种状态都会调用本方法

if(xmlHttp.readyState == 4 && xmlHttp.status ==200){
	//双重判断:判断是否为4状态;而且还要判断是否为200
	//获取服务器的响应内容
	var text =xmlHttp.responseText;
	}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值