Ajax
ajax简介
使用 XMLHttpRequest 实现 Ajax
-
XMLHttpRequest的方法
-
XMLHttpRequest的属性
-
发送请求:利用XMLHttpRequest实例与服务器进行通信包含以下三个关键部分
- onreadystatechange事件处理函数
- open方法
- send方法
- onreadystatechange事件处理函数
-
接受相应
-
readyState
-
status
-
responseText
-
responseXML
-
-
利用get请求实现Ajax的helloworld
-
在WebContent下新建helloAjax.txt
hello Ajax!
-
在WebContent下新建index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> window.οnlοad=function(){ //1.获取a节点,并为其添加conclick相应函数 document.getElementByTagName("a")[0].οnclick=function(){ //3.创建一个XMLHttpRequest对象 var request=new XMLHttpRequest(); //4.准备发送请求的数据:url var url=this.href; var method="GET"; //5.调用XMLHttpRequest对象的open方法 request.open(method,url); //6.调用XMLHttpRequest对象的send方法 request.send(null); //7.为XMLHttpRequest对象添加onreadystatechange函数 request.onreadystatechange=function(){ //8.判断响应是否完成: XMLHttpRequest对象的readyState属性值为4的时候 if(request.readyState == 4){ //9.再判断响应是否可用: XMLHttpRequest对象的status属性值为200 if(request.status == 200 || request.status== 304){ //10.打印响应结果responseText alert(request.responseText); } } } //2.取消a节点的默认行为 return false; } }; </script> </head> <body> <a href="helloAjax.txt">HelloTxt</a> </body> </html>
-
效果
-
-
利用post请求实现Ajax的helloworld(了解)
-
<script type="text/javascript"> window.οnlοad=function(){ //1.获取a节点,并为其添加conclick相应函数 document.getElementsByTagName("a")[0].οnclick=function(){ //3.创建一个XMLHttpRequest对象 var request=new XMLHttpRequest(); //4.准备发送请求的数据:url var url=this.href; var method="POST"; //5.调用XMLHttpRequest对象的open方法 request.open(method,url); request.setRequestHeader("ContextType","application/x-www-form-urlencoded"); //6.调用XMLHttpRequest对象的send方法 request.send("name=xuefeng"); //7.为XMLHttpRequest对象添加onreadystatechange函数 request.onreadystatechange=function(){ //8.判断响应是否完成: XMLHttpRequest对象的readyState属性值为4的时候 if(request.readyState == 4){ //9.再判断响应是否可用: XMLHttpRequest对象的status属性值为200 if(request.status == 200 || request.status== 304){ //10.打印响应结果responseText alert(request.responseText); } } } //2.取消a节点的默认行为 return false; } }; </script>
-
效果
-