初学EXTjs

最新推荐文章于 2024-08-09 11:03:09 发布

hao66625

最新推荐文章于 2024-08-09 11:03:09 发布

阅读量322

点赞数

文章标签： xmlhttprequest 服务器 javascript ajax extjs 浏览器

本文链接：https://blog.csdn.net/hao66625/article/details/6268408

版权

最近工作涉及到EXTjs,以前没有接触过，非常的陌生，不过没办法必须学习一下。头脑里都是页面跳转的概念，在CSDN论坛看了都说EXTJS是用的AJAX技术，没有这个页面跳转的概念。一下子脑子里还没有这个概念。

首先来了解一下AJAX，http://www.w3cschool.cn

通过 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据。XMLHttpRequest 对象得到下列浏览器的支持：Internet Explorer 5.0+、Safari 1.2、Mozilla 1.0 / Firefox、Opera 8+ 以及 Netscape 7。

为了理解 AJAX 的工作原理，我们来创建一个小型的 AJAX 应用程序。首先，我们需要一个带有两个文本框的 HTML 表单：用户名和时间。用户名文本框由用户填写，而时间文本框使用 AJAX 进行填写。此 HTML 文件名为 "testAjax.htm"（请注意这个 HTML 表单没有提交按钮！）：

AJAX 的要点是 XMLHttpRequest 对象。

不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。

IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。

如需针对不同的浏览器来创建此对象，我们要使用一条 "try and catch" 语句。您可以在我们的 JavaScript 教程中阅读更多有关 try 和 catch 语句的内容。

让我们用这段创建 XMLHttpRequest 对象的 JavaScript 来更新一下我们的 "testAjax.htm" 文件：

在向服务器发送数据之前，我们有必要解释一下 XMLHttpRequest 对象的三个重要的属性。

onreadystatechange 属性

onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置：

xmlHttp.onreadystatechange=function()
  {
  // 我们需要在这里写一些代码
  }

readyState 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。

这是 readyState 属性可能的值：

状态	描述
0	请求未初始化（在调用 open() 之前）
1	请求已提出（调用 send() 之前）
2	请求已发送（这里通常可以从响应得到内容头部）
3	请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4	请求已完成（可以访问服务器响应并使用它）

我们要向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成（意味着可获得数据）：

xmlHttp.onreadystatechange=function()
  {
  if(xmlHttp.readyState==4)
    {
    // 从服务器的response获得数据
    }
  }

responseText 属性

可以通过 responseText 属性来取回由服务器返回的数据。

在我们的代码中，我们将把时间文本框的值设置为等于 responseText：

xmlHttp.onreadystatechange=function()
  {
  if(xmlHttp.readyState==4)
    {
    document.myForm.time.value=xmlHttp.responseText;
    }
  }

AJAX - 向服务器发送一个请求

要想把请求发送到服务器，我们就需要使用 open() 方法和 send() 方法。

open() 方法需要三个参数。第一个参数定义发送请求所使用的方法（GET 还是 POST）。第二个参数规定服务器端脚本的 URL。第三个参数规定应当对请求进行异步地处理。

send() 方法可将请求送往服务器。如果我们假设 HTML 文件和 ASP 文件位于相同的目录，那么代码是这样的：

xmlHttp.open("GET","time.asp",true);

AJAX - 服务器端的脚本

现在，我们要创建可显示当前服务器时间的脚本。

responseText 属性会存储从服务器返回的数据。在这里，我们希望传回当前的时间。这是 "time.asp" 的代码：

<%
response.expires=-1
response.write(time)
%>

注释：Expires 属性可设置在页面缓存失效前页面被缓存的时间（分钟）。Response.Expires=-1 指示页面不会被缓存。

hao66625

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学EXTjs

<br /> 最近工作涉及到EXTjs,以前没有接触过，非常的陌生，不过没办法必须学习一下。头脑里都是页面跳转的概念，在CSDN论坛看了都说EXTJS是用的AJAX技术，没有这个页面跳转的概念。一下子脑子里还没有这个概念。<br /> 首先来了解一下AJAX，http://www.w3cschool.cn <br /> 通过 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您的 Jav
复制链接

扫一扫