Ajax教程实例详解

什么是 AJAX

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下(AJAX 是一种用于创建快速动态网页的技术)。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

XMLHttpRequest 对象

Ajax的核心是JavaScript对象XmlHttpRequest

<script type="text/javascript"> function createXHR(){ var xhr = null; try { // Firefox, Opera .+, Safari,IE+ xhr = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xhr = new ActiveXObject("Msxml.XMLHTTP"); } catch (e) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { xhr = null; } } } return xhr; } </script>

XMLHttpRequest对象用法

XMLHttpRequest对象有两个重要方法 open与send

在使用XMLHttpRequest对象时要调用的第一个方法是open方法,调用方式:XMLHttpRequest.open(“get”,”default.aspx”,true); 这段代码会针对default.aspx页面发送get请求,关于这段代码有三点需要注意:

1. URL是相对于当前页面的路径,也可以使用绝对路径

2. 调用open方法并不会真正的发送请求,而是初始化一个请求准备发送

3. 只能向同一个域中使用相同协议和端口的URL发送请求,否则会因为安全原因报错

要想把请求发往服务器需要调用send方法,send方法接受一个参数,参数是请求主体要发送的数据,如果不需要发送数据则传入null,在调用send方法之后请求被发往服务器,如下

xhr.send(null);

请求发往服务器,服务器根据请求生成响应(Response),传回给XHR对象,在收到响应后相应数据会填充到XHR对象的属性,有四个相关属性会被填充:

1. responseText:作为响应主体被返回的文本

2. responseXML:如果响应内容的类型是”text/xml”或”application/xml”,这个属性将保存包含着相应数据的XML文档

3. status:响应的HTTP状态(200,404,500等)

4. statusText:HTTP状态说明

onreadystatechange 事件

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

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

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

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

在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

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

我们可以在接受响应之前调用abort方法取消异步请求:XMLHttpRequest .abort();

注意:

在使用XMLHttpRequest对象的send()方法时,如果使用的是get请求或者不需要发送数据的post请求时,需要使用send(null);

如果想要发送数据数据,则需要使用post请求,先使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates");

以上内容是小编给大家介绍的Ajax教程实例详解,希望对大家有所帮助!

时间: 2024-10-24 01:39:37

Ajax教程实例详解的相关文章

Ajax教程实例详解_AJAX相关

什么是 AJAX AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下(AJAX 是一种用于创建快速动态网页的技术). 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如

Ajax和$.ajax使用实例详解(推荐)

实例一(Ajax请求基本创建格式): <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Ajax练习(GET,不考虑浏览器兼容性)</title> <script type="text/JavaScript"> function doRequest() { //不考虑浏览器兼容性问题 var

jquery ajax入门实例详解($.ajax $.get $.post $.getJSON $.getScript)

什么是 AJAX? AJAX = Asynchronous JavaScript and XML. AJAX 是一种创建快速动态网页的技术. AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新.这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新. AJAX 和 jQuery jQuery 提供了用于 AJAX 开发的丰富函数(方法)库. 通过 jQuery AJAX,使用 HTTP Get 和 HTTP Post,您都可以从远程服务器请求 TXT.HTML.XML

javascript中ajax post实例详解

一,原生态的XMLHttpRequest  代码如下 复制代码 <script language="javascript">          function saveintroduce()     {     //获取接受返回信息层     var introducemsg = document.getElementById("introducemsg");     //获取表单对象和用户信息值     var f = document.introd

javascript教程:实例详解parseInt()

文章简介:你所不知的parseInt. 相信大家都知道parseInt()是做什么的,这里就不啰嗦了. 以前用parseInt()从来都是parseInt(arg) , 记得在某本javascript书上看过,他还可以有第二个参数,不过从来没有用过,直到今天, 我看到两行代码: parseInt("08"); //0 parseInt("08", 10); //8 发现,不理解为什么,于是花了一个小时细细的研究了下,原来parseInt是介样滴~ 当然这里分为两种情

jQuery ajax 异步传输实例详解

在jquery中我们要使用异步或同步传输,只要在ajax参数的async设置真或假的设置即可 例, 不使用异步传输  代码如下 复制代码 function changeCartState(arr){    var str=false;    $.ajax({        type : 'POST',        async : false,        url : '/scripts/cart.php',        data: {act:'buy',itemId:arr},      

jQuery中ajax - get() 方法实例详解_AJAX相关

在jquery中使用get,post和ajax方法给服务器端传递数据,在上篇文章给大家分享了jquery中ajax-post()方法实例,下面通过本文继续学习jQuery中ajax - get() 方法,具体介绍请看下文. jQuery Ajax 参考手册 实例 使用 AJAX 的 GET 请求来改变 div 元素的文本: $("button").click(function(){ $.get("demo_ajax_load.txt", function(resul

jQuery中ajax - post() 方法实例详解_AJAX相关

在jquery中的ajax有二个数据发送模式,一种是get,另一种是post(). jQuery Ajax 参考手册 实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp

jQuery使用$.ajax进行即时验证实例详解_jquery

本文实例讲述了jQuery使用$.ajax进行即时验证的方法.分享给大家供大家参考,具体如下: 这里实现使用jQuery和一般处理程序即时验证用户录入的学号是否重复,当光标离开输入框即给出提示. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddStudent.aspx.cs" Inherits="AddStudent" %> <!DOCTY