`

ajax(一)

 
阅读更多

一、ajax简介

 异步的javascript和xml

创建快速动态网页的技术

通过在后台与服务器进行少量的数据交换,不用重新加载整个页面,只需要对网页某部分进行刷新

二、XMLHttpRequest

1、是ajax的基础

2、XMLHttpRequest对象 用于在后台与服务器交换数据。这意味着可以不用重新加载整个页面,对网页的某部分进行更新。

3、

①创建XMLHttpRequest对象

 

var xmlhttp;

if(window.XMLHttpRequest){//如果支持XMLHttpRequest对象,则创建一个XMLHttpRequest对象

    xmlhttp= new XMLHttpRequest();

}else{

   xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");//否则创建ActiveX对象

}

②用于和服务器交换数据(所以就有请求和响应)

open(method,url,async)

     method:规定请求类型

     url:文件在服务器上的类型

     async:同步(false)还是异步(true)

PS:

点击按钮执行HTTP请求然后跳转下一页:
同步:发送http请求→获取返回结果→分析结果→跳转下一页
异步:发送http请求→跳转下一页(不需要等待请求结果,对结果的处理在另一个线程中)

(一般大部分都是异步请求)

send(string):将请求发送到服务器   string:仅用于 POST 请求

A。get请求

<!--StartFragment -->
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
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");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>

B。post请求

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
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");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","/ajax/demo_post2.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据<button>
<div id="myDiv"></div>

</body>
<xml>

三、响应

responseXML 获得 XML 形式的响应数据。

responseText 获得字符串形式的响应数据

四、

属性:status:200--ok;404--未找到页面

           readystate:0--请求未初始化

                             1--服务连接已建立

                             2--请求已接收

                             3--请求处理中

                             4--请求已完成且响应已就绪

方法:onreadystatechange()--每当readystate属性改变时都会调用这个函数

         

 

 

分享到:
评论

相关推荐

    asp.net ajax一个实例

    ASP.NET AJAX(Asynchronous JavaScript and XML)是一种技术框架,它扩展了Microsoft的ASP.NET平台,引入了异步交互和丰富的用户体验。在这个实例中,我们将深入探讨如何使用ASP.NET AJAX来创建一个更高效的Web应用...

    miniAjax一个迷你Ajax库为简单的Web应用程序提供了Ajaxjsonp和ready特性

    Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。这种技术可以让用户体验更加流畅,因为它避免了...

    一个完整的jquery+ajax传送请求的实例

    本文将深入探讨一个完整的jQuery+AJAX传输请求的实例,旨在帮助开发者理解如何有效地使用这两种技术实现异步数据通信。 首先,jQuery是一个强大的JavaScript库,它为DOM操作、事件处理、动画效果和Ajax交互提供了...

    Ajax中文手册 API

    AJAX介绍AJAX是一种运用JavaScript和可扩展标记语言(XML),在网络浏览器和服务器之间传送或接受数据的技术。2. AJAX实例AJAX可以用来创建更多交互式的网络应用程序。3. AJAX源代码简要分析上一章节效果的代码原理4....

    Ajax一系列的实战案例

    一切竟在你的掌握中撒旦安顺利的记录卡时间到拉萨

    一个完整的ajax应用例子

    **Ajax(Asynchronous JavaScript and XML)技术是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。在本示例中,我们看到一个完整的Ajax应用,用于实现一个模拟的注册页面功能,用户输入用户名后,...

    AJAX原理 原理 AJAX

    AJAX(Asynchronous JavaScript and XML)是一种异步通信技术,允许Web应用程序异步地从服务器请求数据,而不需要重新加载整个网页。下面我们将深入分析AJAX的原理、技术、意义和发展趋势。 AJAX的背景 AJAX技术的...

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

    **Ajax(Asynchronous JavaScript and XML)技术是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,提升了用户体验。Ajax的核心是...

    Ajax.Net的一个简单示例

    在描述中提到的"无刷新技术",是指Ajax的主要优势之一:通过Ajax请求,用户界面可以在后台进行更新,而用户无需等待整个页面刷新。这可以通过以下步骤实现: 1. **创建ASP.NET页面**:首先,创建一个ASP.NET Web ...

    ajax代码 ajax代码

    **Ajax(Asynchronous JavaScript and XML)技术是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。这种技术可以提升用户体验,因为它...

    Ajax中responseText返回的是一个页面而不是一个值

    自己在struts2中的写好了业务逻辑用response返回的内容却是... 您可能感兴趣的文章:ajax的responseText乱码的问题的解决方法jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXMLAjax request response 乱码解决

    Ajax Ajax本质 Ajax本质源码

    Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是现代网页开发中的核心技术,它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这一技术的核心在于实现页面的...

    Ajax刷新 java Ajax 页面刷新

    Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。在Java中,我们可以利用Ajax实现页面的动态刷新,提高用户体验,因为它允许后台与服务器进行异步数据交换...

    AJAXCache是一款jQuery缓存插件可以为ajax方法扩展缓存功能

    AJAXCache是一款针对jQuery库设计的插件,其主要功能是为$.ajax()方法提供缓存支持。在Web开发中,AJAX(Asynchronous JavaScript and XML)技术被广泛用于实现页面的部分更新,提高用户体验,而缓存机制则进一步...

    Ajax简介Ajax.API

    Ajax 是一种创建交互式网页应用的网页开发技术。 Ajax 的优点在于可以在不刷新整个页面的情况下与服务器进行通讯。这个技术可以将网页上的某个部分更新,而不需要刷新整个页面,从而提高了用户体验。 Ajax 的工作...

    四天学会ajax_ajax教程.pdf

    Ajax,全称为Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。Ajax并非一种全新的编程语言,而是利用已有的Web技术(如HTML、JavaScript、DOM和XML)的组合,实现...

    一个简单的Ajax例子

    Ajax(异步JavaScript和XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现局部刷新,提升了用户体验。在这个"一个简单的Ajax例子"中,我们将深入...

    自己用的简单封装AJAX类

    **标题解析:** "自己用的简单封装AJAX类" 指的是作者为了个人使用需求,编写了一个简化的AJAX处理类。AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,...

    AjaxRequest(Ajax使用包)

    AjaxRequest是实现Ajax功能的一个工具包,它简化了JavaScript与服务器进行异步数据交换的过程。在Web开发中,AjaxRequest通常用于提高用户体验,因为用户不必等待整个页面刷新,只更新需要变动的部分。 **Ajax的...

    json ajax ajax框架

    虽然XML最初是AJAX数据传输的一部分,但实际应用中,JSON因其简洁、易读和高效的特点,已经成为AJAX通信中更常用的数据格式。AJAX通过创建XMLHttpRequest对象来实现与服务器的异步交互,通常用于实现网页的无刷新...

Global site tag (gtag.js) - Google Analytics