Ajax进阶一

来源：互联网发布：上海迪士尼门票知乎编辑：程序博客网时间：2024/05/18 18:02

第一：什么是Ajax.
AJAX（Asynchronous Javascript And XML)翻译为中文就是异步的JavaScript和xml,他是利用JavaScript语言和服务进行异步的交互，利用xml进行数据的传输。当然他的数据传输布置xml一种。

第二：Ajax的优点和缺点。
AJAX还有一个最大的特点就是，在服务器响应的时候，不可以局部刷新html页面，不用全部刷新，让用户感觉不到页面的刷新。
Ajax的优点：（1）可以使用JavaScript和服务器进行异步刷新。
（2）可以局部刷新html页面
Ajax的缺点：（1）就是和服务器交互太多导致服务器的压力过大。
第三：什么是同步，什么是异步。
同步交互：客户端发出一个请求后，需要在服务器端响应之后，才能发送第二个请求
异步交互：客户端发出一个请求后，无需等待服务器响应，就能立马发送第二个请求。
第四：Ajax发送请求的四步操作。
ajax发送异步请求（四步操作）

第一步（得到XMLHttpRequest）
- ajax其实只需要学习一个对象：XMLHttpRequest，如果掌握了它，就掌握了ajax。
- 得到XMLHttpRequest
  
  大多数浏览器都支持：var xmlHttp = new XMLHttpRequest();
  IE6.0：var xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);
  IE5.5以更早版本的IE：var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
- 编写创建XMLHttpRequest对象的函数
  function createXMLHttpRequest() {
  try {
  return new XMLHttpRequest();
  } catch(e) {
  try {
  return new ActiveXObject(“Msxml2.XMLHTTP”);
  } catch(e) {
  try {
  return new ActiveXObject(“Microsoft.XMLHTTP”);
  } catch(e) {
  alert(“浏览器不兼容”);
  throw e;
  }
  }
  }
  }
第二步（打开与服务器的连接）
- xmlHttp.open()：用来打开与服务器的连接，它需要三个参数：
请求方式：可以是GET或POST
请求的URL：指定服务器端资源，例如；/day23_1/AServlet,如果这里为get请求，url后边还可以添加参数。
请求是否为异步：如果为true表示发送异步请求，否则同步请求！
xmlHttp.open(“GET”, “/day23_1/AServlet”, true)，如果是post请求，则需要把GET改为POST。
注意：当我们的请求是post请求的时候我们还要设置请求头
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") 因为POST请求必须设置ContentType请求头的值为application/x-www.form-encoded。表单的enctype默认值就是为application/x-www.form-encoded！因为默认值就是这个，所以大家可能会忽略这个值！当设置了<form>的enctype=” application/x-www.form-encoded”时，等同与设置了Cotnent-Type请求头。但在使用AJAX发送请求时，就没有默认值了，这需要我们自己来设置请求头：
第三步（发送请求）
- xmlHttp.send(null)：如果不给可能会造成部份浏览器无法发送！
参数：就是请求体内容！如果是GET请求，必须给出null（因为get的请求参数在url后边添加）。如果不为null则可能在火狐浏览器的情况下导致请求不能正常发送。如果为post请求那么参数在这里应该给出。
第四步（注册监听器）
- 在xmlHttp对象的一个事件上注册监听器：onreadystatechange
- xmlHttp对象一共有5个状态：
0状态：刚创建，还没有调用open()方法;
1状态：请求开始：调用了open()方法，但还没有调用send()方法
2状态：调用完了send()方法了；
3状态：服务器已经开始响应，但不表示响应结束了！
4状态：服务器响应结束！（通常我们只关心这个状态！！！）
得到xmlHttp对象的状态：
var state = xmlHttp.readyState;//可能是0、1、2、3、4
得到服务器响应的状态码
var status = xmlHttp.status;//例如为200、404、500
得到服务器响应的内容1
var content = xmlHttp.responseText;//得到服务器的响应的文本格式的内容
var content = xmlHttp.responseXML;//得到服务器的响应的xml响应的内容，它是Document对象了！

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">    <title>My JSP 'index.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache">    <meta http-equiv="cache-control" content="no-cache">    <meta http-equiv="expires" content="0">        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="This is my page">    <!--    <link rel="stylesheet" type="text/css" href="styles.css">    -->  </head><script type="text/javascript">  //获取xmlhttpequest对象  function createXmlHttpRequest(){  try {    return new XMLHttpRequest();} catch (e) {    try {        return new ActiveXObject("Msxml2.XMLHTTP");    } catch (e) {        try {            return new ActiveXObject("Microsoft.XMLHTTP");        } catch (e) {            return alert("你的浏览器类型不支持");            throw e;        }    }}  }  //html在加载完成之后就调用方法  window.onload=function (){（这个的方法说实话不太明白，希望各位大神在评论区里指导一下）  //获取btn  var btn=document.getElementById("btn");  //给btn的点击事件注册一个监听器  btn.onclick=function (){  //ajax的四步操作，得到服务器的相应  //1.获取xmlhttprequest的对象  var xmlhttp=createXmlHttpRequest();  //2.打开与服务器的连接,需要是哪个参数  xmlhttp.open("GET","/AjaxWeb/Aservlet",true);  //3.建立链接  xmlhttp.send(null);  //4.在xmlhttp上边注册监听事件  xmlhttp.onreadystatechange=function (){  if(xmlhttp.readyState==4 && xmlhttp.status==200){    var text=xmlhttp.responseText;    var h1=document.getElementById("h1");    h1.innerHTML=text;  }  }  }  }</script>  <body>   <button id="btn">点击提交</button>   <h1 id="h1"></h1>  </body></html>

阅读全文

0 0