JavaWeb学习-AJAX-1- AJAX介绍

进入到一个新的知识点的学习,这个知识点叫做Ajax,指的是异步的javascript和xml,Ajax不是一种编程语言,而是一种用于创建更好更快,交互性更强的web应用程序技术,是基于Javascript xml css html新用法。

 

1.什么是Ajax

下面这张图可以解释Ajax是由什么组成

Ajax就是上面四个单词缩写,主要是看第一个单词,异步的,Asynchronous,相反肯定有同步的概念。

 

先简单理解下什么是同步和异步。

同步,之前我们练习demo过程中访问各种jsp页面,其实就是同步的,一个jsp页面全部元素对应的请求都同一时间发往web服务器,服务器开始处理,返回返回给客户端。没做一次操作,都需要刷新整个页面,这个就是同步的场景。

异步,拿手机淘宝举例,我们打开手机淘宝首页,里面有分很多子产品。例如天天特价,淘抢购等,同样是首页,淘抢购这个局部区域,一般都间隔一段时间进行刷新,显示出商品。这种局部刷新技术,就是异步请求。

 

2.Ajax涉及技术名词解释

JavaScript:更新局部的网页

XML:一般用于请求数据和响应数据的封装

XMLHttpRequest对象:发送请求到服务器并获得返回结果

CSS:美化页面样式

异步:发送请求后不等返回结果,由回调函数处理结果。

JavaScript中XMLHttpReuqest对象是整个Ajax技术的核心,它提供了异步发送请求的能力。

 

3.同步请求和异步请求对比

 

4.XMLHttpReuqest对象简介

4.1 XMLHttpReuqest的构造方法

Eclipse上新建一个动态的web项目,然后在WebContext文件夹下新建一个1.html文件,输入下面代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
		window.onload = function(){
			var xmlhttp;
			if (window.XMLHttpRequest){
				// code for IE7+, Firefox, Chrome, Opera, Safari
			    xmlhttp=new XMLHttpRequest();
			} else{
				// code for IE6, IE5
			    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			alert(xmlhttp);
		}
</script>
<body>

</body>
</html>

选择任何浏览器去打开这个1.html文件,如果出现以下图效果,说明XMLHttpReuqest对象创建成功。

 

4.2 XMLHttpReuqest方法和属性

方法名

说明

open(method,URL,async)

建立与服务器的连接

method参数为http请求方法,例如get 和post

async参数指定是否使用异步请求,值为true或者false,默认是true

send(context)

发送请求

context指定请求的参数,一般情况下我们给传null,这个参数相当于请求正文,如果是get请求,我们一般都是url后面问号传参,所以这写null,如果是post,我们写例如name=tom

 

SetRequestHeader(header,value)

设置请求头信息,例如charset=UTF-8

常用属性:

readyState: 返回类型是short,只读

responseText: 返回类型是String,只读

responseXML: 返回类型是Document,只读

status: 返回类型是short,只读,例如返回500错误

 

事件处理器

onreadystatechange

下表说明readyState不同状态码的含义。

就绪状态码

说明

0

XMLHttpRequest 对象没有完成初始化,即刚刚创建

1

XMLHttpRequest对象开始发送请求

调用open方法,但还没调用send方法,请求还没有发出

2

XMLHttpRequest对象请求发送完成,send方法已经调用,数据已经提交到服务器,但没有任何响应。

3

XMLHttpRequest对象开始读取响应,但还没有完成,收到所有响应消息头,但正文还没有完全收到。

4

XMLHttpRequest对象请求已完成,响应就绪。

下一篇详细来学习下XMLHttpRequest对象用代码来做一下发送请求。

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值