AJAX(一、基本知识)

AJAX:Asynchronous ([?‘s??kr?n?s; e?-])Javascript ([‘d?ɑ:v?,skr?pt])and XML 异步的Javascript和XML
AJAX不是新的编程语言,而是一种使用现有标准的新方法

百度百科解释:

AJAX是指一种创建交互式网页应用的网页开发技术,中文名:阿贾克斯

AJAX = 异步 Javascript和XML(标准通用标记语言的子集)。

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

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

AJAX的基础:XMLHttpRequest

1.创建XMLHttpRequest对象:

variable=new XMLHttpRequest();

但是老版本的IE5、IE6使用ActiveX对象:

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

因此为了适应所有的浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :

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对象用于和服务器交换数据

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

open(method,url,async)

规定请求的类型,URL 以及是否异步处理请求。

  • method:请求的类型;GET 或 POST
  • url:文件在服务器上的位置
  • async:true(异步)或 false(同步)

send(string)

将请求发送到服务器。

  • string:仅用于 POST 请求

GET 还是 POST?

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

下面是ajax请求本地.txt文件的全部代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax请求本地.txt文件</title>
    <script>
        window.onload = function () {
            var btn = document.getElementById(‘btn‘);

            btn.onclick = function () {
                //创建XHR对象
                var xhr = new XMLHttpRequest();

                //请求的方式,地址,是否异步 test.txt和该html文件在同一级目录
                xhr.open(‘get‘, ‘test.txt‘, true);

                //请求的确定操作,初始化,相当于搜索时,敲击的回车
                xhr.send(null);

                //请求的readyState每变化一次就执行一次onreadystatechange函数
                //其中readyState表示的是:请求/响应过程的当前活动阶段
                //readyState有如下取值
                /*
                 *   0:未初始化,尚未调用send()方法
                 *   1: 启动
                 *   2:发送
                 *   3:接收
                 *   4:完成
                 */
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status==200) {
                        alert(xhr.responseText);
                    }
                }
            };
        };
    </script>
</head>
<body>
<input type="button" id="btn" value="click">
</body>
</html>

效果:

3.AJAX——服务器响应

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

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

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

如果来自服务器的响应并非 XML,请使用 responseText 属性。responseText 属性返回字符串形式的响应,因此可以这样使用:

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

4.AJAX - onreadystatechange 事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息:

onreadystatechange:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。

readyState:

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪

status:  200: "OK"     404: 未找到页面

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

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

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

上面就是最基础的AJAX使用方法。

时间: 2024-08-05 03:56:15

AJAX(一、基本知识)的相关文章

Comet——反向Ajax (基础知识)

Comet:服务器推送,与ajax页面向服务器请求数据相反.几乎可以实时将数据推送到客户端. 但本质一样:浏览器向服务器发起请求,服务器响应请求 Comet实现方式:长轮询.HTTP流 1.长轮询——所有浏览器都支持 浏览器向服务器发送请求,若服务器端有有效数据,则响应,否则“不作理会”. 一旦服务器响应,本次连接关闭,浏览器立刻发送下一次请求. 2.HTTP流——只有部分浏览器原生支持它 在页面的生命周期内只发送一次请求,而服务器保持连接打开,周期性向客户端发送数据

AJAX一些基础知识和小例子讲解

首先说下AJAX不是一种语言 是一种技术. AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax核心是一个new XMLHttpRequest()对象/ 在ie5.6中为new ActiveXObject("Microsoft.XMLHTTP")对象; XMLHttpRequest对象用于数据

Ajax——php基础知识

AMP环境 AMP(Apache.MySQL.PHP)是三个独立的软件,但是对于初学者而言分别安装以及配置需要掌握一定的软件知识,所以就有了很多AMP集成环境帮助我们简化安装 --WAMP WAMP安装 1.下一步下一步 2.修改httpd.conf文件 3.打开conf文件,#Listen 12.34.56.78:80  Listen 80==>#Listen 12.34.56.78:88  Listen 88 4.修改项目存储位置,允许所有人访问,如下图 PHP语法 原文地址:https:/

Ajax——异步基础知识(二)

XML数据格式 1.首行必须是版本号和格式等信息 <?xml version="1.0" encoding="utf-8" ?> 2.最外层需要一个根节点进行包裹 3.标签有开头有结尾,效率低下 4.php中设置header需要将content-type设置成text/xml header("content-type:text/xml;charset=utf-8"); 3.浏览器读取XML文件是用ajax.responseXML 4.

关于ajax的基础知识

一.是什么 一种异步请求数据的web开发技术,对于改善用户体验和页面性能很有帮助.简单的说就是在不需要刷新页面的情况下实现局部dom的更新.应用场景如:模糊查询以及验证提示等. 二.原理 因为js是一个单线程的脚本语言,那么他是如何实现ajax异步的呢?这就得益于流浪器提供的一个XMLHttpRequest对象.我们举个例子:领导想找小李让其汇报下工作. 1.领导告诉秘书叫小李过来 2.领导接着干别的事儿 3.秘书去叫小李 4.秘书领小李过来 5.秘书告诉领导小李来了 6.小李向领导汇报工作 以

了解HTML/CSS/JS/JQuery/ajax等前端知识

什么是HTML 超文本标记语言 浏览器通过识别相应的标签来加载页面 通过HTTP协议传输,不是编程语言 HTML常用标签 title script style link meta link body body标签 h1-h6 p br hr strong p b div img a table tr td 列表标签 ul ol li 表单标签 input redio checkbox text submit button resit password fiel hidden select 什么是

ajax基础使用知识

AJAX = “Asynchronous Javascript and XML” 优点:ajax异步和服务器进行数据交换并处理数据,然后更新页面的局部数据,不用整体刷新 1,不用整体刷新减轻客户端内存使用2,不用刷新,用户操作连贯3,ajax处理更新数据,减轻服务器负担4,标准化开发 XMLHttpRequest用于和服务器交换数据 1,创建XMLHttpRequest 对象: var=new XMLHttpRequest();//IE5和IE6:var=new ActiveXObject("M

旧知识打造新技术--AJAX学习总结

AJAX是将旧知识在新思想的容器内进行碰撞产生的新技术:推翻传统网页的设计技术,改善用户体验的技术. 学习AJAX之初写过一篇<与Ajax的初次谋面>.其中都只是一些自己浅显的理解,这次就总结一下它在历史长河中的重要地位. [全] AJAX全称为Asnychronous  JavaScript  And  XML,而所谓的"旧知识"就是html.XML.JavaScript甚至是之前的css.  AJAX包含以下技术的使用: 使用DOM进行动态显示和交互, 使用XML和xs

11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处理页面的,处理页面只是操作数据库并且返回值,页面都是ajax处理的. ajax的写法: test.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

ajax系列之用jQuery的ajax方法向服务器发出get和post请求

打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个form表单里用来实现form提交,第二个输入框是单独的.没有包含在form里,下面就用这两个输入框来学习下jQuery的ajax. 1,前端的html和javascript代码 页面html 1 <main style="text-align: center; margin: 200px a