`
hkjdkl
  • 浏览: 31157 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Ajax学习(1)

    博客分类:
  • java
阅读更多

XMLHttpRequest 是 AJAX 的基础。

1,XMLHttpRequest 的创建。

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

2, 向服务器发送请求
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

方法                                                 描述
open(method,url,async)                 规定请求的类型、URL 以及是否异步处理请求。 

                                                       method:请求的类型;GET 或 POST
                                                       url:文件在服务器上的位置 
                                                       async:true(异步)或 false(同步)
 
send(string)                                    将请求发送到服务器。     

                                                       string:仅用于 POST 请求
 
setRequestHeader(header,value)   向请求添加 HTTP 头。   

                                                        header: 规定头的名称
                                                        value: 规定头的值

 

3,async与onreadystatechange

当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

 

 

4,服务器响应

如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

 

5,onreadystatechange 事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务。

每当 readyState 改变时,就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性:

 

属性                                           描述
onreadystatechange          存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState                          存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

                                           0: 请求未初始化 
                                           1: 服务器连接已建立 
                                           2: 请求已接收 
                                           3: 请求处理中 
                                           4: 请求已完成,且响应已就绪
 
status                                 200: "OK"
                                           404: 未找到页面

 

6,使用 Callback 函数

callback 函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):

function myFunction()
{
loadXMLDoc("ajax_info.txt",function()--后面的就是callback函数
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}

 

分享到:
评论

相关推荐

    Ajax学习资料+实例

    【Ajax学习资料+实例】 Ajax,全称Asynchronous JavaScript And XML,是一种在2005年由Google推广的技术,它不是一种新的编程语言,而是一种利用已有标准(如JavaScript和HTTP请求)来创建交互性更强、运行更高效...

    ajax 学习笔记源代码

    ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习...

    掌握Ajax 学习资料pdf

    掌握 Ajax第 1 部分-Ajax 简介 掌握 Ajax第 2 部分-使用 JavaScript 和 Ajax 发出异步请求 掌握 Ajax第 3 部分-Ajax 中的高级请求和响应 掌握 Ajax第 4 部分-利用 DOM 进行 Web 响应 掌握 Ajax第 5 部分-操纵 DOM ...

    ajax ajax原理 ajax代码 ajax编程 ajax学习

    - **jQuery 和 Axios**:学习Ajax时,可以了解jQuery的$.ajax()方法和现代JavaScript库Axios,它们都提供了更方便的接口来处理Ajax请求。 在项目中,Ajax常用于实现动态加载、表单提交、实时通讯等功能。随着前端...

    .net中ajax学习解决方案

    "ajax学习"可能是一个包含教程、示例代码和讲解文档的文件或文件夹,而"ajaxѧϰ"可能是教学材料或练习项目,"ѧϰ"在拼音中代表"学习",因此这很可能是针对AJAX技术的学习资料。 以下是一些关于.NET中AJAX技术的...

    Ajax全套学习教程

    本套学习教程旨在全面、系统地介绍Ajax的核心概念、实现方式以及实际应用,帮助学习者掌握这一强大的Web开发工具。 一、Ajax基础知识 1.1 Ajax的工作原理:Ajax通过JavaScript与服务器进行异步通信,用户在页面上...

    jquery、ajax学习电子书.zip

    《jQuery与Ajax学习指南》是一本专为初学者和有一定JavaScript基础的开发者设计的电子书,旨在帮助读者深入理解和熟练掌握这两个在实际Web开发中不可或缺的技术。jQuery是一个强大的JavaScript库,它极大地简化了DOM...

    Ajax学习资料 Ajax

    Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种在无需重新加载整个网页的情况下,能够...在学习过程中,可以结合实例代码进行实践,加深对Ajax的理解,并逐步掌握其在实际项目中的应用。

    学习ajax的文档——ajax基础文档

    **Ajax(Asynchronous JavaScript and XML)**是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。这个技术由JavaScript实现,通常与...通过不断实践和深入学习,你将能够运用Ajax创造出更多优秀的Web项目。

    ajax基础学习资料

    **Ajax(Asynchronous JavaScript and XML)**是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器...通过不断实践和学习,开发者可以更好地利用Ajax来构建高效、动态的网页应用。

    jquery + struts1 + ajax学习例子

    这个"jquery + struts1 + ajax学习例子"提供了结合这三个技术的实践教程,帮助开发者更好地理解和运用它们。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画设计以及Ajax交互。jQuery的...

    Ajax学习全攻略,很好很全面的学习资料

    Ajax,即Asynchronous JavaScript and XML(异步JavaScript与XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。...通过深入学习和理解Ajax,开发者可以构建出更高效、更流畅的网页应用。

    学习ajax必不可少的资料

    "学习Ajax必不可少的资料"这个压缩包包含了两个PPT文件,很可能是详细讲解Ajax技术的教程或案例分析。 TP1.ppt可能涵盖了Ajax的基础概念,包括它的起源、工作原理以及为何在Web开发中如此重要。可能会讲解...

    ajax学习文档 很好的学习文档 希望大家好好的利用哦

    【Ajax学习文档】深入解析 Ajax,全称Asynchronous JavaScript and XML,是一种在不刷新整个网页的情况下,能够更新部分网页内容的技术。它并不是一项新技术,而是由一系列已存在的技术组合而成,包括JavaScript、...

    初学ajax 有关于ajax的学习

    在初学者的学习过程中,理解Ajax的核心概念、工作原理以及如何应用它,是至关重要的。 ### 1. **Ajax的核心概念** Ajax基于JavaScript语言,通过XMLHttpRequest对象与服务器进行异步通信。异步意味着它不会阻塞...

    javascript和ajax学习指南 Learn_JavaScript_and_Ajax_with_w3Schools.zip

    这份"Learn_JavaScript_and_Ajax_with_w3Schools.zip"压缩包包含了一个电子书和一个文本文件,旨在帮助学习者掌握这两种技术的核心概念。 JavaScript,全称ECMAScript,是一种轻量级的解释型编程语言,主要用于网页...

    AJAX学习笔记(内含实例)

    AJAX学习笔记。内含Java调用的两个实例,及JavaScript的ajax工具函数,可快速入门,也可当手册使用。个人精心整理,值得收藏。 更多:http://download.csdn.net/user/daillo/all

    ajax学习开发手册

    在《Ajax学习开发手册》中,通常会涵盖以下关键知识点: 1. **基础概念**: - **异步通信**:Ajax的核心是JavaScript的XMLHttpRequest对象,它允许浏览器在不刷新整个页面的情况下与服务器通信。 - **请求与响应*...

    学习ajax用的各种文档

    本资料包“学习ajax用的各种文档”提供了丰富的资源,帮助学习者深入理解和掌握Ajax的核心概念和应用。** ### 一、Ajax基础 1. **异步通信**: Ajax的核心是JavaScript对象XMLHttpRequest,它允许在后台与服务器通信...

    ajax学习经典源码

    **Ajax学习经典源码详解** Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现...

Global site tag (gtag.js) - Google Analytics