day16_Ajax

最新推荐文章于 2024-11-20 10:38:14 发布

原创最新推荐文章于 2024-11-20 10:38:14 发布 · 104 阅读

0 ·

CC 4.0 BY-SA版权

java web 专栏收录该内容

19 篇文章

订阅专栏

什么是Ajax

Ajax：（Asynchronous JavaScript And XML）指异步 JavaScript 及 XML

不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS新用法

Ajax：只刷新局部页面的技术

JavaScript：更新局部的网页
XML：一般用于请求数据和响应数据的封装
XMLHttpRequest对象：发送请求到服务器并获得返回结果
CSS：美化页面样式
异步：发送请求后不等返回结果，由回调函数处理结果

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

构造方法

不同浏览器，甚至相同浏览器的不同版本，获取该对象的方式是不同的。

方法：

open() "get|post" ，"url?name=tom" ，"true|false"

send() 发送请求。可以带参数或 null

setRequestHeader()

属性

readyState：类型short；只读

responseText：类型String；只读

我们向ajax后台的程序发送xmlhttp请求的时候, 后台程序接到请求会进行处理,处理结束后,可以返回一串数据给前台,这个就是responseText.

responseXML：类型Document；只读

status：类型short；只读

事件处理器

onreadystatechange

获取xmlhttprequet

window.onload = function() {
	//1、获取XMLHttpRequest对象
	var req = getXMLHttpRequest();
	
	//4、处理响应结果
	req.onreadystatechange = function(){
		//alert(req.readyState);
		if(req.readyState==4){
			//alert(req.status);//查看服务器端响应状态
			if(req.status==200){//服务器响应一切正常
				alert(req.responseText);
				console.info(req);
			}
		}
	}
	//2、建立一个连接
	req.open("get","${pageContext.request.contextPath }/servlet/servletDemo1");
	//3、发送请求
	req.send(null);
}

1、获取对象

2、建立连接

3、发送请求

4、处理响应结果

servletDemo1

public void doGet(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {
	PrintWriter out = response.getWriter();
	out.print("hello moto");
}

常用方法

方法名	说明
open(method,URL,async)	建立与服务器的连接 method参数指定请求的HTTP方法,典型的值是GET或POST URL参数指请求的地址 async参数指定是否使用异步请求，其值为true或false
send(content)	发送请求 content参数指定请求的参数
setRequestHeader(header,value)	设置请求的头信息

常用属性

onreadystatechange：指定回调函数

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

readyState: XMLHttpRequest的状态信息

就绪状态码	说明
0	XMLHttpRequest对象没有完成初始化即：刚刚创建。
1	XMLHttpRequest对象开始发送请求调用了open方法，但还没有调用send方法。请求还没有发出
2	XMLHttpRequest对象的请求发送完成 send方法已经调用，数据已经提交到服务器，但没有任何响应
3	XMLHttpRequest对象开始读取响应，还没有结束收到了所有的响应消息头，但正文还没有完全收到
4	XMLHttpRequest对象读取响应结束一切都收到了

status：HTTP的状态码（网页返回的状态信息）

状态码	说明
200	服务器响应正常
400	无法找到请求的资源
403	没有访问权限
404	访问的资源不存在
500	服务器内部错误

responseText：获得响应的文本内容

responseXML：获得响应的XML文档对象 documednt

注：就绪状态是4而且状态码是200，才可以处理服务器数据

4 >> XMLHttpRequest能读取对象

200 >> 服务器正确响应

使用Ajax验证用户名是否存在实现步骤：

使用文本框的onBlur事件
使用Ajax技术实现异步交互
1. 创建XMLHttpRequest对象
2. 通过 XMLHttpRequest对象设置请求信息
3. 向服务器发送请求

创建回调函数，根据响应状态动态更新页面

JSON对象

对象语法：

{ "name":"runoob", "alexa":10000, "site":null }

访问对象值

你可以使用点号（.）或者（[]）来访问对象的值：

var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj.name;

x = myObj["name"];

嵌套 JSON 对象：

myObj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}

使用Jsonconfig可以去掉不要的字段