Ajax简述

转载 2015年11月19日 16:42:44

传统Web应用允许用户填写表单,当提交表单时向Web服务器发送一个HTTP请求。服务器接收并处理传来的表单,然后返回一个新的网页到用户浏览器。使用传统Web应用时若要改变页面的一小部分数据,需要重新加载整个页面,这是一种不友好的用户体验。而且由于每次应用的交互都需要向服务器发送请求,应用的响应时间依赖于服务器的响应时间,这有可能导致用户花费较长的等待时间。

 

与传统Web应用不同的是,AJAX采用异步交互过程。AJAX可以仅向服务器发送并取回必须的数据,它使用SOAP(简单对象访问协议)或其他一些基于XML的Web Service接口,并在客户端采用JavaScript处理来自服务器的响应。用户在页面上获得的数据是通过AJAX引擎提供的,由于页面不需要与服务器直接交互,所以客户端浏览器不需要刷新页面就能获得服务器的信息,提高了页面的友好度。

 

 

 

一、ajax

Ajax(Asynchronous Javascript and XML)的缩写。

包括:

XHTML  CSS:标准化呈现

DOM:实现动态显示和交互

XML和XSLT:数据交换和处理

XMLHttpRequest:异步读取数据

JavaScript:绑定和处理所有数据

JSON:数据交互

二、XMLHttpRequest对象

如何创建:

function createXMLHttpRequest() {

    if (window.ActiveXObject) {

       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

    } else if (window.XMLHttpRequest) {

       xmlHttp = new XMLHttpRequest();

    }

}

 

1、XMLHttpRequest 对象的方法

方法名称

描述

open(“method”,url)

建立对服务器的调用

send(context)

向服务器发送请求

abort()

停止当前请求

。。。。

 

 

2、XMLHttpRequest 对象的属性

属性名称

描述

onreadystatechange

状态改变的事件触发器,通常绑定一个js函数,当状态发送改变是,就调用该函数

readyState

请求状态:

0:未初始化

1:读取中

2:已读取

3:交互中

4:完成

status

从服务器返回的状态码

200:成功

404:文件找不到

500:服务器代码错误

。。。

responseText

从服务器返回的文本形式的响应内容

 

responseXML

从服务器返回的兼容DOM的xml的文档对象

 

。。。

 

 

 

三DOM 模型入门

1、入门简介

dom模型的全称是Document Object Module,即文档对象模型,它定义了操作文档对象的接口。在这个模型中,一个文档被看作结构化的数据,对于xml就像一棵树的结构,树中的每个节点对应一个XML标记,都是一个对象。

 

例如web 页面的Html文档,doucument就是根节点,其他的子对象,如链接、图片、表单等都是树叶。

   如图:

 

 

 

在Ajax开发中,dom模型是最核心的结构,是所有ajax开发的基础架构。如果没有dom模型,就没有办法在客户端改变页面的内容,所有 的局部刷新、异步请求也就无从实现。

Dom模型提供了对页面文档对象进行操作的手段。

 

2、dom结构模型

2.1dom中的文档层次结构

在dom模型中,整个文档是一棵树的结构,树的根节点是document对象,表示整个文

档对象,并且它仅包含一个子节点<html>.

例如:

<html>

<head>

<title> new Document </title>

</head>

<body>

  Hello,ajax.

</body>

 

document

 

这个文档的层次结构是:

html

 

文本节点

 

 

 

 

 

 

 

 

 

 


根节点: document

子节点: html

文本节点:

 

父节点

   兄节点:

 

整个html文档实际上是具有树状层次结构的节点组成,彼此之间可以通过父节点、子节点和兄节点的关系互相引用。

当引用到一个节点,实际上就是获取一个节点对象。通过dom定义的方法,可以对该节点进行操作。

 

节点的类型

在xml(html)文档中,不仅每个闭合的标记是一个节点,而且闭合标记中的文本、标

记内的属性也是节点。分别称为元素节点、文本节点和属性节点。

例如:

<label for =”checkbox1”>labelll </lebel>

 

3 处理DOM中节点

   3.1、直接引用节点

   在dom模型中引用一个节点可以有多种方式,下面分别介绍。

  (!)使用document.getElementById()引用指定id的节点

   在html文档中,每个标记都可以有一个id属性。标准中规定:这个id必须是整个文档中唯一的。对于这个属性,document提供了getElementById方法来获取这个节点的应用。

例如:

<html>

<head>

<title> new Document </title>

</head>

<body>

  <span id=”span1”>Hello,ajax.</span>

</body>

   </html>

   <script language=”JavaScript” type=”text/javascript”>

       var spna1=document.getElementById(“span1”);

       span1.innerHTML=”innerHTMLchanged”;

   </script>

 

  (2)使用 document.getElementsByTagName()引用指定标记名称的节点

<html>

<head>

<title> new Document </title>

</head>

<body>

  <span id=”span1”>Hello,ajax.</span>

<span id=”span2”>Hello,ajax.</span>

</body>

   </html>

   <script language=”JavaScript” type=”text/javascript”>

       var spna= document.getElementsByTagName(“span”)

       for(var i=0;i< spna.length;i++)

      {

       Spna[i].innerHTML=”innerHTMLchanged”;

}

   </script>

 3.2、使用innerHTML改变节点的内容

   innerHTML属性表示两HTML 标记间以代码形式表示的所有内容。

  可以通过innerHTML属性获取或改变其中的内容。

 

3.3 获取和设置属性节点的值

每个属性节点都是元素节点的一个属性,可以通过如下形式访问:

元素节点.属性节点

例如:

<img id=”imgDemo” src=”hello.jpg” alt=”demo”/>

   可以使用如下的代码来获取和改变图片的地址:

 <script language=”JavaScript” type=”text/javascript”>

    Var imgNode-document.getElementById();

    imgNode.src=”ok.jpg”;   

</script> 

相关文章推荐

Ajax简述

一、什么是AJAX: Asynchronous JavaScript and XML,异步的javascript和XML   1, 它是一个客户端技术,是将原来的一些老的技术进行结合使用,产生一种新...

ajax 控件简述

UpdatePanel 局部刷新用 UpdateProgress 是一个和 ASP.Net AJAX UpdatePanel 控件相协作,可以使得页面用户在 UpdatePanel 向服务器提交请...

jsp页面通过ajax向后台传参实现收藏功能

好久没写文章,之前的项目转成毕设了所以又逼着自己推了推进度。 这次主要是填上次的坑。 上一篇写到了做的web页面用于展示。但是还有很多问题没有解决,比如分页显示,比如如何将标记的结果传给后台。这次...

cropbox + springmvc +ajax 裁剪上传

最近用到了裁剪上传,用最简单的方式进行实现。发现好多用jcrop的,那个是根据坐标切割原图,而cropbox是转成base64码。 接下来看实现cropbox.js 从网上下下来的 ,代码很少就直接...

Ajax PHP JavaScript MySQL实现简易的无刷新在线聊天室

思路 消息显示区 发消息 板块 消息显示 消息发送 优化 显示非重复性的数据 优化显示 加上滚动条 每次都显示最新消息 完整代码 前端代码 数据库表结构 服务器端代码 总结与展望 总结 展望为更好的运...

Java -- Ajax异步访问数据库内容

以上篇博文源码为样例fork,介绍Ajax异步访问数据信息,以下为新增内容 控制层control() – 新增内容 /* URL: .\control\QueryBookServlet.java; 方...

ajax 设置Access-Control-Allow-Origin实现跨域访问

ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全。 即使使用jquery的jsonp方法,t...

ajax中值得注意的地方

//创建ajax对象 function createXMLHttpRequest(){ var request = false; //一般先判断非IE浏览器 //window对...

ajax异步提交form

第一种  jQuery.ajax  同时jquery 序列化 ,调用一方法,name:value的形式 有调用超时相应,但传递参数不能为“汉字” jquery 序列化 name:value的形...
  • qdyu00
  • qdyu00
  • 2012-03-16 11:26
  • 5122

用ajax自己写仿 google search suggest的搜索提示

无聊的时候写的,也没什么精练和安全可言,纯是为了好玩....而且我也没有像GOOGLE那样去考虑JS文件大小等等各种因素,我的目的是能实现能玩就可以了.呵呵.....         主要原理是这样...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)