AJAX学习（一）ajax发送请求

来源：互联网发布：7号外设淘宝店网址编辑：程序博客网时间：2024/05/20 05:10

一、AJAX介绍

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
使用 AJAX 的应用程序案例：京东购物车、百度搜索框、新浪注册

二、ajax发送请求步骤

1. 创建对象： XMLHttpRequest 对象
该对象是对JavaScript 的一个扩展，可使网页与服务器进行通信。是创建Ajax 应用的最佳选择。实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject 。为了每次写Ajax的时候都节省一点时间，可以把对象检测的内容打包成一个可复用的函数：

function getHTTPObject(){    var xhr=false;    if (window.XMLHttpRequest){    // code for IE7+, Firefox, Chrome, Opera, Safari     xhr=new XMLHttpRequest();    }    else if(window.ActiveXObject){    // code for IE6, IE5     xhr=new ActiveXObject("Microsoft.XMLHTTP");   }   return xhr;}

对window.XMLHttpRequest的调用会返回一个对象或null，if语句会把调用返回的结果看作是true或false（如果返回对象则为true，返回null则为false）。如果XMLHttpRequest对象存在，则把 xhr 的值设为该对象的新实例。如果不存在，就去检测 ActiveObject 的实例是否存在，如果答案是肯定的，则把微软 XMLHTTP 的新实例赋给 xhr

2. 创建一个连接

创建的链接可以根据需求来拼接不同的参数，但请求方式（get和post）的不同使其也不相同 var url=相应的链接的值 xhr.open(method, url, async, username, password)   *-method包括POST和GET两种   -url即设置的参数url   -async代表对是否异步的设置，默认为true即异步，false代表同步   -username与password通常不使用* var url=this.href+"?time="+new Date();   //测试get请求   xhr.open("GET", url, true);   //测试post请求   xhr.open("POST", url, true);

3. 发送请求

（1）get方式
//xhr.send(null);//测试get请求，加null，为了防止火狐浏览器出错
（2）post方式
//post方式发送请求，它会告知服务器正在发送数据，并且数据已经符合URL编码了。
//该方法必须在open()之后才能调用

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xhr.send("goal=study&today=ajax");//post方式发送ajax请求的参数的编写方法

4. 监听请求相应过程（*）

 xhr.onreadystatechange=function(){     // alert("请求的状态的变化情况："+xhr.readyState);     if(xhr.readyState==4){//确保与服务器有成功的交互    //alert("请求http协议状态码和原因描述为："+xhr.status+"  "+xhr.statusText);       if(xhr.status==200||xhr.status==304){//确定得到OK    //接收响应信息     var result=xhr.responseText;//代表接收的是字符串内容，可以包含片段html代码，json格式字符串。    //xhr.responseXML;//代表接收的数据格式是xml的               //输出检验               //alert(result);               //根据用户的需求进行显示控制,将结果放入div中               document.getElementById("showDiv").innerHTML=result;             }             //额外的处理(拓展)             if(xhr.status==404){               alert("sorry,请求的资源不存在");             }           }        }

这里写图片描述

以一个小例子为例：

这里写图片描述

实现代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="${applicationScope.basePath}">    <title>My JSP 'ajax.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">  <script type="text/javascript">    //页面加载事件    window.onload=function(){      //每加载一次页面就给出提示信息（ 整个页面）      var code=Math.random();      document.getElementById("hh").innerHTML+=code;      //利用a标签发出ajax请求      document.getElementsByTagName("a")[0].onclick=function(){       //ajax发请求       //1.创建对象     核心对象   XMLHttpRequest       var xhr="";       //alert(window.XMLHttpRequest);       //alert(window.ActiveXObject);//undefined       if(window.XMLHttpRequest){         //alert("modren");         xhr=new XMLHttpRequest();       }else if(window.ActiveXObject){//了解即可        // alert("old");         xhr=new ActiveXObject("Microsoft.XMLHTTP");        }       //2.创建一个连接       var url=this.href+"?time="+new Date();       //测试get请求       //xhr.open("GET", url, true);//async:是否异步。默认为true---》代表异步；false---》代表同步       xhr.open("POST", url, true);       //post方式发送请求，它会告知服务器正在发送数据，并且数据已经符合URL编码了。       //该方法必须在open()之后才能调用       xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");       //3.发送请求       //xhr.send(null);//测试get请求，加null，为了防止火狐浏览器出错       xhr.send("goal=study&today=ajax");//post方式发送ajax请求的参数的编写方法       //4.监听请求响应过程（必须了解）,每次状态的值的改变都会调用js函数，由服务器进行调用的       xhr.onreadystatechange=function(){          // alert("请求的状态的变化情况："+xhr.readyState);          if(xhr.readyState==4){//确保与服务器有成功的交互             //alert("请求http协议状态码和原因描述为："+xhr.status+"  "+xhr.statusText);             if(xhr.status==200||xhr.status==304){//确定得到OK               //接收响应信息               var result=xhr.responseText;//代表接收的是字符串内容，可以包含片段html代码，json格式字符串。               //xhr.responseXML;//代表接收的数据格式是xml的               //输出检验               //alert(result);               //根据用户的需求进行显示控制,将结果放入div中               document.getElementById("showDiv").innerHTML=result;             }             //额外的处理(拓展)             if(xhr.status==404){               alert("sorry,请求的资源不存在");             }           }        }      return false;//防止a标签跳转      }    }  </script>  </head>  <body>      <h2 id="hh">学习原生ajax技术</h2>      <a href="hello.txt">ajax发出请求</a>      <div id="showDiv" style="height: 200px;width: 300px;border: 1px solid red">null</div>      <h3>我是占位的，就是打酱油的</h3>  </body></html>

阅读全文

0 0