`

Ajax基础总结

    博客分类：
  • Ajax
Ajax浏览器IEJavaScriptMicrosoft 
阅读更多

AJAX基础


异步对象链接服务器

 

步骤:
1.创建XMLHttpRequest异步对象

   var xmlHttp;
        function createXMLHttpRequest() {
            if (window.ActiveXObject) {//判断是否是IE核心浏览器
                var activexName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
                for (var i = 0; i < activexName.length; i++) {
                    try {
                        xmlHttp = new ActiveXObject(activexName[i]);
                        break;
                    } catch (e) { 
                        
                    }
                }
            } else if (window.XMLHttpRequest) {//判断是否是标准DOM浏览器(如火狐就是标准DOM浏览器)
                xmlHttp = new window.XMLHttpRequest();
            }
        }

 

2.建立请求

 

xmlHttp.open("get","test.aspx",true);
/*xmlHttp.open方法
第一个参数表示请求方式分别是get,post
第二个参数代表所要请求的页面
第三个参数代表是否使用异步请求:true为使用异步请求false为同步交互*/

 

3.判断异步对象与服务器交互的状态

 

//xmlHttp.onreadystatechange事件代表当服务器状态发生变化的时候则调用该函数
//readyState==4代表服务器交互的状态是否成功.
//同时判断Http.status=200代表服务器的交互状态
xmlHttp.onreadystatechange=function(){
	if(xmlHttp.readyState==4 && xmlHttp.status==200){
		//code block......	
	}	
}

 

 4.send()发送

 

xmlHttp.send(null);//如果是get请求,则使用xmlHttp.send(null);就可以了.

 

 示例1:

 

<script type="text/javascript">
 var xmlHttp;
        function createXMLHttpRequest() {
            if (window.ActiveXObject) {//判断是否是IE核心浏览器
                var activexName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
                for (var i = 0; i < activexName.length; i++) {
                    try {
                        xmlHttp = new ActiveXObject(activexName[i]);
                        break;
                    } catch (e) { 
                        
                    }
                }
            } else if (window.XMLHttpRequest) {//判断是否是标准DOM浏览器(如火狐就是标准DOM浏览器)
                xmlHttp = new window.XMLHttpRequest();
            }
        }
function startRequest(){
	createXMLHttpRequest();
	xmlHttp.open("get","Default.aspx",true);
	xmlHttp.onreadystatechange=function(){
		if(xmlHttp.readyState ==4 && xmlHttp.status==200){
			document.getElementById("msg").innerHTML=xmlHttp.responseText;
		}
	}
		xmlHttp.send(null);
}
</script>
</head>
<body>
<input type="button" onclick="startRequest();" value="测试"/>
<div id="msg"></div>
</body>
</html>

 

Default.aspx页面:

 

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Write("成功啦!");
        Response.End();
    }
}

 

GET VS POST:
GET:

 

var queryString="firstName=isaac&birthday=0624";//向服务器发送的数据
var url="Default.aspx?"+queryString+"&timestamp="+new Date().getTime();
//这里的timestamp参数,使得每一次点击的时候都发送不同的数据,这里主要为了避免IE浏览器的自动缓存
//通过timestamp="+new Date().getTime();使得每次发送的URL不同,欺骗浏览器每一次都强制刷新
xmlHttp.open("get",url);
xmlHttp.send(null);//用Get方式时send方法的参数使用null即可,因为所有向服务器发送的数据都放在QueryString的部分

 

POST:

 

var queryString="firstName=isaac&birthday=0624";//向服务器发送的数据
var url="Default.aspx?"+queryString+"&timestamp="+new Date().getTime();
//这里的timestamp参数,使得每一次点击的时候都发送不同的数据,这里主要为了避免IE浏览器的自动缓存
//通过timestamp="+new Date().getTime();使得每次发送的URL不同,欺骗浏览器每一次都强制刷新
xmlHttp.open("post",url);
//POST需要重新设置请求头文件为表单提交的形式
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(queryString);//该语句负责发送数据,post方式的数据是由send方法提交的.

 

示例2:

 

<script type="text/javascript">

var xmlHttp;

function createXMLHttpRequest(){
	try{
		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	}catch(e){s
		try{
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}catch(e){
		xmlHttp=new XMLHttpRequest();		
		}
	}
}

function createQueryString(){
	var firstName=document.getElementById("firstName").value;
	var birthday=document.getElementById("birthday").value;
	var queryString="firstName="+firstName+"&birthday="+birthday;
	return encodeURI(encodeURI(queryString));//两次转码解决传递的参数中文乱码问题
	//在ASP.NET中Post请求传递的数据则不会乱码,你可以去除转码的方法做试验,而get方法必须转码否则会乱码.
}

function handleStatusChange(){
	if(xmlHttp.readyState==4 && xmlHttp.status==200){
			document.getElementById("serverRequest").innerHTML=decodeURI(xmlHttp.responseText);//解码操作.
	}	
}

function doRequestUsingGet(){
	createXMLHttpRequest();
	var url="Default.aspx?"+createQueryString()+"&timestamp="+new Date().getTime();
	xmlHttp.open("get",url);
	xmlHttp.onreadystatechange=handleStatusChange;
	xmlHttp.send(null);
}

function doRequestUsingPost(){
		createXMLHttpRequest();
		var queryString=createQueryString();
		alert(queryString);
		var url="Default.aspx?timespan="+new Date().getTime();
		alert(url);
		xmlHttp.open("post",url);
		xmlHttp.onreadystatechange=handleStatusChange;
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xmlHttp.send(queryString);
}
</script>
</head>
<body>
<h2>请输入姓名和生日</h2>
姓名:<input type="text" id="firstName"/><br />
生日:<input type="text" id="birthday" /><br />
<input type="button"  value="get" onclick="doRequestUsingGet()"/>
<input type="button" value="post" onclick="doRequestUsingPost()" />
<div id="serverRequest"></div>
</body>
</html>

 

aspx页面

 
 

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        String URL = "GET";
        if (Request.HttpMethod=="POST")
        {
            URL = "post";
        }
        Response.Write(URL+":"+Request["firstName"]+" your birthday is "+Request["birthday"]);
        string a=Request["firstName"];
    }
}

 

小结:


AJAX 组成
1.表示　　　　　　XHTML+CSS
2.动态显示和交互　DOM
3.数据交互和操作　XML、XSLT
4.异步数据获取　　XMLHttpRequest
5.绑定和处理数据　JavaScript

 

----------------------------------------

XMLHttpRequest 对象

 

      Number readyState 4
 属  Function onreadystatechange
      string responseText
      XMLDocument responseXML
 性  Number status 200
      string statusText OK

      void open(string,string,boolean) //打开到服务器的连接
       第一个参数的可以使用的请求方式:GET,POST,HEAD,PUT,DELETE
        OPTIONS,TRACE
       第二个参数为指定的请求地址:url
       第三个参数代表是否异步请求,true为异步请求:true
 

 

 方  void send(string)  //发送请求
      void setHeader(string,string) //设置Http头信息
 　  string getResponseHeader(string) //获得某个Http头信息
 法  string getAllResponseHeaders() //获取所有Http头信息
      void abort() //终止异步交互

----------------------------------------

 

AJAX相关技术

１、JavaScript
２、XHTML可扩展的超文本标记语言 (HTML)
３、CSS (层叠样式表)
４、DOM (文档对象模型)
５、XML (可扩展标记语言) 有很多用途,最典型的是可以让程序员自己去定义标签.
６、XSTL (可扩展的样式表转换语言) 最主要的功能是将XML转换为HTML,还可以将数据转换成xml文件或pdf文件等
７、XMLHttpRequest

分享到：
| 重装系统后运行“鲁大师（Z武器）”的漏洞 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ajax基础知识总结

    学习ajax基础知识，让自己的前端技术更上一层，学会与后台交互

    Ajax基础入门简介

    **Ajax基础入门简介** Ajax（Asynchronous JavaScript and XML）是一种用于创建快速、动态网页的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这一技术的出现极大地提升...

    AJAX基础教程.pdf

    ### AJAX基础教程知识点总结 #### 一、AJAX概述 - **定义**：Asynchronous JavaScript and XML（异步JavaScript和XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 - **目的**：提高Web应用的...

    ajax基础学习总结及例子

    **Ajax基础学习总结及例子** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术的核心在于利用JavaScript创建异步通信请求，与服务器交换数据并...

    ajax基础教程文档

    ### Ajax基础教程知识点详解 #### 一、Ajax技术概览 **1.1 Web应用** - **起源与发展：** - 最早的互联网是为连接少数顶尖研究机构而设计的，用户需要掌握复杂的系统。 - 早期互联网的雏形（如ARPANET）为后续...

    AJAX_技术总结_设计模式

    - **XMLHttpRequest 对象**：AJAX 的基础，负责在后台与服务器进行通信，发送请求并接收响应。 - **JavaScript**：创建和控制 XMLHttpRequest 对象，处理请求和响应，以及更新网页内容。 - **异步通信**：AJAX 的...

    14ajax课程_AJAX基础_

    **AJAX基础详解** 在现代Web开发中，AJAX（Asynchronous JavaScript and XML）是一种核心技术，它使得网页能够实现异步数据交换，无需刷新整个页面即可更新部分内容。本教程将深入探讨AJAX的基础知识，帮助你理解其...

    AJAX学习总结（一）--基于jQuery第一个实例

    在本篇“AJAX学习总结（一）--基于jQuery第一个实例”中，我们将探讨如何使用jQuery库实现异步JavaScript和XML（AJAX）技术。AJAX允许我们在不刷新整个页面的情况下，更新网页的部分内容，从而提供更流畅的用户体验...

    AJAX电子书(总结)

    ### 一、AJAX基础 1. **XMLHttpRequest对象**：这是AJAX的基础，用于在后台与服务器通信。通过这个对象，我们能发送HTTP请求，接收响应，并处理返回的数据。 2. **异步请求**：AJAX请求是非阻塞的，这意味着网页的...

    ajax详细总结

    ### AJAX详解 #### 一、什么是AJAX？ AJAX（Asynchronous JavaScript and XML）是一种用于创建更快、更响应式Web...通过掌握上述基础知识，开发者可以轻松地在其项目中集成AJAX功能，实现更加流畅和高效的用户界面。

    AJAX基础到精通教程

    **AJAX基础到精通教程** AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，大大提升了用户...

    ajax基础教程002

    根据提供的标题“ajax基础教程002”及描述“ajax基础教程002”，我们可以推断这份文档的主要目的是介绍或讲解Ajax的基础知识。Ajax（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术，它通过在...

    Ajax基础教程(PDF)

    **Ajax基础教程** Ajax，全称为"Asynchronous JavaScript and XML"，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术的核心在于利用JavaScript与服务器进行异步数据交换，结合XML（或JSON...

    AJAX 基础, Funditions of AJAX

    ### AJAX基础知识概述 #### 一、引言 随着网络技术的发展与互联网应用的普及，用户对Web应用的要求越来越高。为了满足这些需求，一种名为Ajax（Asynchronous JavaScript and XML）的技术应运而生。《AJAX基础》这...

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

    总结，Ajax通过JavaScript实现了网页的局部刷新，提升了用户体验，减少了网络通信的开销。理解并掌握Ajax的基本用法和高级特性，对于开发动态、交互性强的Web应用至关重要。通过不断实践和深入学习，你将能够运用...

    Ajax技术总结，上面是对ajax技术的使用总结

    总结，Ajax技术通过组合各种Web技术，极大地提升了网页的交互性和用户体验，但在使用时需要根据具体场景选择合适的应用，避免造成不必要的困扰。同时，XML作为数据交换的载体，与Ajax配合，共同推动了Web应用程序的...

    非常实用的Ajax基础培训课件

    Ajax，全称Asynchronous ...总结，Ajax作为Web开发中的一个重要技术，它的基础理论和实践应用是每个前端开发者必备的技能。理解并熟练掌握Ajax，将有助于提升你的Web应用开发能力，为用户提供更流畅的交互体验。

    Ajax-Ajax基础实例

    **Ajax基础实例详解** AJAX，全称"Asynchronous JavaScript and XML"，是一种使用JavaScript技术实现异步通信，更新网页局部内容的技术，无需刷新整个页面。它通过创建XMLHttpRequest对象，发送HTTP请求，然后在...

    非常好Ajax基础教程

    【Ajax基础教程详解】 Ajax（异步JavaScript和XML）是一种技术，它利用浏览器早已存在的功能，但直到近年来Gmail、Google搜索建议和Google地图等应用出现后才引起了广泛关注。Ajax的核心在于两个关键特性：无需刷新...

    ajax技术总结，主要是基础方面的知识

    **Ajax技术总结** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。这种技术的核心是JavaScript...

Magicbox
Global site tag (gtag.js) - Google Analytics