首页 > 其他分享 >Ajax基本流程

Ajax基本流程

时间:2023-03-28 10:07:27浏览次数:38  
标签:基本 username XMLHttpRequest 请求 流程 request send Ajax http



Ajax基本流程

Ajax基本流程

1.     Web表单中获取数据

2.     建立XmlHttpRequest

3.     根据XmlHttpRequest中的oper方法来确定发送的请求方式和URL以及是否同步执行。(没有发送请求,要用到send方法才能发送。)

4.     设置响应接受后运行函数。

5.     用XmlHttpRequest中的send方法来发送请求。Loaded方法来确定是完全接收响应。

编写Ajax简单实例

Text.jsp页面 

 

<body>
   <form name="form1" action="" method="post">
 User Name:<input type="text" name="username" value=""> 
 <input type="button" name="check" value="check" onClick="userCheck()">
</form>
  </body>

<script type="text/javascript">
  var http_request = false;
  function send_request(url) {//初始化、指定处理函数、发送请求的函数
                           //开始初始化XMLHttpRequest对象
   if(window.XMLHttpRequest) { //Mozilla 浏览器
    http_request = new XMLHttpRequest();
    }
   /*
      XMLHttpRequest 得到了所有现代浏览器较好的支持。
               唯一的浏览器依赖性涉及 XMLHttpRequest 对象的创建。
               在 IE 5 和 IE 6 中,必须使用特定于 IE 的 ActiveXObject() 构造函数。
   */
   else if (window.ActiveXObject) { // IE浏览器
        try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");    
        } catch (e) {
         try {
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {}
        }
   }
   if (!http_request) { //异常,创建对象实例失败
    window.alert("不能创建XMLHttpRequest对象实例.");
    return false;
   }
   http_request.onreadystatechange = processRequest;   //当属性调用open和send方法的时候,这个onreadystatechange方法就会调用
   // 确定发送请求的方式和URL以及是否同步执行下段代码
   http_request.open("GET", url, true);//open方法已调用,但是 send() 方法未调用。请求还没有被发送。
   http_request.send(null);//方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。 如果是post的方式提示用Send(“username=abc”)这样传值。而get方式只能在uri中加参数
  }
  // 处理返回信息的函数
     function processRequest() {
         if (http_request.readyState == 4) { // 判断对象状态     readyState == 4 是判断HTTP响应已经是否完全接收
             if (http_request.status == 200) { // 信息已经成功返回,开始处理信息
                 alert(http_request.responseText);//当readyState==4时responseText保存了完整的响应体
             } else { //页面不正常
                 alert("您所请求的页面有异常。");
             }
         }
     }
  function userCheck() {
   var f = document.form1;
   var username = f.username.value;
   if(username=="") {
    window.alert("The user name can not be null!");
    f.username.focus();
    return false;
   }
   else {
    send_request('check1.jsp?username='+username);
   }
  }
 </script>

 

 

check1.jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 <%
 String username= request.getParameter("username");
 if("lzz".equals(username)) out.print(username+"用户名已经被注册,请更换一个用户名。");
 else out.print(username+"用户名尚未被使用,您可以继续。");
 %>

 

对XmlHttpRequest理解

XMLHttpRequest 对象用于和服务器交换数据。

XMLHttpRequest可以提供不重新加载页面的情况下更新网页,在页面加载后在客户端向服务器请求数据,在页面加载后在服务器端接受数据,在后台向客户端发送数据。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM文档形式返回内容。

      XMLHttpRequest 得到了所有现代浏览器较好的支持。唯一的浏览器依赖性涉及 XMLHttpRequest 对象的创建。在 IE 5 和 IE 6 中,必须使用特定于 IE 的 ActiveXObject() 构造函数。

//注意:在上面实例中有用到XmlHttpRequest中的readyState属性和onreadystatechange事件,以下具体讲了它们是怎么变化和触发的

   XMLHttpRequest 中的readyState 属性 HTTP 请求的状态.当一个 XMLHttpRequest 创建时,这个属性的值从 0 开始,直到接收到完整的 HTTP 响应,这个值增加到 4。下表列出了状态、名称和含义:  

状态

名称

描述

0

Uninitialized

初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。

1

Open

open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。

2

Send

Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。

3

Receiving

所有响应头部都已经接收到。响应体开始接收但未完成。

4

Loaded

HTTP 响应已经完全接收。

readyState 的值不会递减,除非当一个请求在处理过程中的时候调用了 open() 方法。每次这个属性的值增加的时候,都会触发onreadystatechange 事件句柄。

 

Ajax基本流程

1.     Web表单中获取数据

2.     建立XmlHttpRequest

3.     根据XmlHttpRequest中的oper方法来确定发送的请求方式和URL以及是否同步执行。(没有发送请求,要用到send方法才能发送。)

4.     设置响应接受后运行函数。

5.     用XmlHttpRequest中的send方法来发送请求。Loaded方法来确定是完全接收响应。

编写Ajax简单实例

Text.jsp页面 

 

<body>
   <form name="form1" action="" method="post">
 User Name:<input type="text" name="username" value=""> 
 <input type="button" name="check" value="check" onClick="userCheck()">
</form>
  </body>

<script type="text/javascript">
  var http_request = false;
  function send_request(url) {//初始化、指定处理函数、发送请求的函数
                           //开始初始化XMLHttpRequest对象
   if(window.XMLHttpRequest) { //Mozilla 浏览器
    http_request = new XMLHttpRequest();
    }
   /*
      XMLHttpRequest 得到了所有现代浏览器较好的支持。
               唯一的浏览器依赖性涉及 XMLHttpRequest 对象的创建。
               在 IE 5 和 IE 6 中,必须使用特定于 IE 的 ActiveXObject() 构造函数。
   */
   else if (window.ActiveXObject) { // IE浏览器
        try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");    
        } catch (e) {
         try {
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {}
        }
   }
   if (!http_request) { //异常,创建对象实例失败
    window.alert("不能创建XMLHttpRequest对象实例.");
    return false;
   }
   http_request.onreadystatechange = processRequest;   //当属性调用open和send方法的时候,这个onreadystatechange方法就会调用
   // 确定发送请求的方式和URL以及是否同步执行下段代码
   http_request.open("GET", url, true);//open方法已调用,但是 send() 方法未调用。请求还没有被发送。
   http_request.send(null);//方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。 如果是post的方式提示用Send(“username=abc”)这样传值。而get方式只能在uri中加参数
  }
  // 处理返回信息的函数
     function processRequest() {
         if (http_request.readyState == 4) { // 判断对象状态     readyState == 4 是判断HTTP响应已经是否完全接收
             if (http_request.status == 200) { // 信息已经成功返回,开始处理信息
                 alert(http_request.responseText);//当readyState==4时responseText保存了完整的响应体
             } else { //页面不正常
                 alert("您所请求的页面有异常。");
             }
         }
     }
  function userCheck() {
   var f = document.form1;
   var username = f.username.value;
   if(username=="") {
    window.alert("The user name can not be null!");
    f.username.focus();
    return false;
   }
   else {
    send_request('check1.jsp?username='+username);
   }
  }
 </script>

 

check1.jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 <%
 String username= request.getParameter("username");
 if("lzz".equals(username)) out.print(username+"用户名已经被注册,请更换一个用户名。");
 else out.print(username+"用户名尚未被使用,您可以继续。");
 %>

 

对XmlHttpRequest理解

XMLHttpRequest 对象用于和服务器交换数据。

XMLHttpRequest可以提供不重新加载页面的情况下更新网页,在页面加载后在客户端向服务器请求数据,在页面加载后在服务器端接受数据,在后台向客户端发送数据。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM文档形式返回内容。

      XMLHttpRequest 得到了所有现代浏览器较好的支持。唯一的浏览器依赖性涉及 XMLHttpRequest 对象的创建。在 IE 5 和 IE 6 中,必须使用特定于 IE 的 ActiveXObject() 构造函数。

//注意:在上面实例中有用到XmlHttpRequest中的readyState属性和onreadystatechange事件,以下具体讲了它们是怎么变化和触发的

   XMLHttpRequest 中的readyState 属性 HTTP 请求的状态.当一个 XMLHttpRequest 创建时,这个属性的值从 0 开始,直到接收到完整的 HTTP 响应,这个值增加到 4。下表列出了状态、名称和含义:  

状态

名称

描述

0

Uninitialized

初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。

1

Open

open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。

2

Send

Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。

3

Receiving

所有响应头部都已经接收到。响应体开始接收但未完成。

4

Loaded

HTTP 响应已经完全接收。

readyState 的值不会递减,除非当一个请求在处理过程中的时候调用了 open() 方法。每次这个属性的值增加的时候,都会触发onreadystatechange 事件句柄。

标签:基本,username,XMLHttpRequest,请求,流程,request,send,Ajax,http
From: https://blog.51cto.com/u_16034393/6153810

相关文章

  • 练习01_基本运算与程序结构
    通过之前的练习,我们掌握了Python的安装和环境配置,我们尝试了anaconda的jupyternotebook和百度飞桨PPAIStudio。两个都是非常方便的编程平台,使用者可以根据自己的要求和......
  • 2023-03-28 图的基本表示
    图的基本表示1图的分类无向图UndirectedGraph有向图DirectedGraph无权图UnweightedGraph有权图WeightedGraph方向和权重组合可以得到如下四种常见的图:......
  • mysql笔记1 基本语法(待完结)
    语法样式总的来说挺像c++的,无论是分号结尾,不强制的缩进还是/**/的注释。不过要注意它并不区分大小写,这很重要语句分类分为四种,定义的、增删改的、查询的、和管权限的。......
  • Spinner(列表选项框)的基本使用
    这一节是想给大家介绍一个Gallery(画廊)的一个控件,尽管我们可以不通过兼容使用Gallery,不过想想还是算了,因为Gallery在每次切换图片的时候,都需要重新创建视图,这样无疑会造成......
  • extjs4 ajax 同步设置
     //把新的数据发送到服务端去,保存 Ext.Ajax.request({ url:dept/addDeptInfo.action, sync:true,//同步 params:{ ......
  • 数字IC设计全流程介绍
    数字IC设计全流程设计掌握数字集成电路设计的流程数字设计流程中每个阶段主要做哪些工作?数字设计流程中每个阶段使用的主要EDA工具?数字电路常用软件公司Mentor(ques......
  • python基本语法元素
    命名与保留字注:嵩天老师的python课的笔记python语言程序设计(慕课)变量:程序中保存和表示数据的占位符号如:Money=input()#从键盘获取一串字符串后将字符串赋值给Mon......
  • 05 Golang 流程控制
    一、条件判断1.条件判断简介条件语句是用来判断给定的条件是否满足(表达式值是否为true或者false),并根据判断的结果决定执行情况的语句。go语言中的条件语句主要包含如......
  • Linux学习第三课-文件基本属性
    1.文件基本属性​ 在Linux中,可以使用ll或ls-l命令来显示一个目录或文件的属性以及所属的用户和组​ 如在根目录下:​ 如上图所示,每列的含义为:第一列表示属性;第......
  • 企业申请ITSS的流程
    ITSS认证内容运用一系列标准,帮助企业制定一套完整的IT服务标准体系,包含了IT服务的规划设计、部署实施、服务运营、持续改进和监督管理等全生命周期阶段应遵循的标准,涉及咨询......