AJAX学习（一）ajax发送请求

最新推荐文章于 2023-03-22 08:37:46 发布

FightingBoyws

最新推荐文章于 2023-03-22 08:37:46 发布

阅读量383

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/FightingBoyws/article/details/75948057

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、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>

FightingBoyws

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX学习（一）ajax发送请求

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

扫一扫