1.   XMLHttpRequest 是 AJAX 的基础。

所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。

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

创建 XMLHttpRequest 对象的语法

var  variable=new XMLHttpRequest();

有时候为了保证程序的可靠性,我们还需要考虑浏览器是否支持XMLHttpRequest。此时就需要编写一段代码进行兼容;

代码块部分:

var xmlhttp;

if (window.XMLHttpRequest) {

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttp=new XMLHttpRequest();

} else {

// IE6, IE5 浏览器执行代码

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

}

2.AJAX - 向服务器发送请求请求

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

open("GET","url",true);
       send();

open(method,url,async)

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

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

将请求发送到服务器。

  • string:仅用于 POST 请求
  • tring=null:仅用于GET请求

GET 还是 POST?

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

get  方法主要是用于获取url?后面的地址所携带的信息,比post更节省性能,速度更快;

但是post更安全,在以下情况中,必须使用 POST 请求:

无法使用缓存文件(更新服务器上的文件或数据库)

向服务器发送大量数据(POST 没有数据量限制)

发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

get实例:

post实例:

通常情况下我们使用异步,这样程序执行起来更加方便,因为通过 AJAX,JavaScript 无需等待服务器的响应,而是:

在等待服务器响应时执行其他脚本

当响应就绪后对响应进行处理

异步时

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

xmlhttp.readystatechange=function() {

if (xmlhttp.readyState==4 && xmlhttp.status==200) {

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

}

}

xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);

xmlhttp.send();

同步时:JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。

也就是async=false,即 open() 方法中的第三个参数改为 false

注意:当您使用 async=false 时,请不要编写 readystatechange 函数 - 把代码放到 send() 语句后面即可:

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);

xmlhttp.send();

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

3.AJAX - 服务器 响应

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

属性 描述
responseText 如果来自服务器的响应并非 XML,使用 responseText 属性。获得字符串形式的响应数据。
responseXML 如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,使用 responseXML 属性:获得 XML 形式的响应数据。

onreadystatechange 事件

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

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

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

下面是 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;

//将获取的数据发送给前端盒子

}

}

注意: onreadystatechange 事件被触发 4 次(0 - 4), 分别是: 0-1、1-2、2-3、3-4,对应着 readyState 的每个变化。

使用回调函数

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

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

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

function myFunction() {

loadXMLDoc("/try/ajax/ajax_info.txt",function() {

if (xmlhttp.readyState==4 && xmlhttp.status==200) {

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

}  });

}

ajax入门学习的更多相关文章

  1. AJAX入门学习(转)

    一.基础概念 1.全称:Asynchronous.JavaScript.And.XML(异步的 JavaScript 和 XML). 2.定义: Ajax不是一个技术,它实际上是几种技术,每种技术都有 ...

  2. Django学习——图书管理系统图书修改、orm常用和非常用字段(了解)、 orm字段参数(了解)、字段关系(了解)、手动创建第三张表、Meta元信息、原生SQL、Django与ajax(入门)

    1 图书管理系统图书修改 1.1 views 修改图书获取id的两种方案 1 <input type="hidden" name="id" value=& ...

  3. ReactJS入门学习一

    ReactJS入门学习一 阅读目录 React是什么? React如何制作组件? 理解组件属性props 理解页面中如何渲染数据的 理解从服务器端获取数据及理解state的 回到顶部 React是什么 ...

  4. 掌握 Ajax,第 1 部分: Ajax 入门简介

    转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...

  5. AJAX入门---DOM操作HTML

    AJAX入门---DOM操作HTML 一边学习AJAX一边坐着总结加深印象.上次写的是怎样简单的使用XMLHttpRequest对象.今天写的是DOM(文档对象模型(Document Object M ...

  6. Egg入门学习(二)---理解service作用

    在上一篇文章 Egg入门学习一 中,我们简单的了解了Egg是什么东西,且能做什么,这篇文章我们首先来看看官网对Egg的整个框架的约定如下,及约定对应的目录是做什么的,来有个简单的理解,注意:我也是按照 ...

  7. PHP 入门学习教程及进阶(源于知乎网友的智慧)

    思过崖历程: 自学的动机.自学的技巧.自学的目标三个方面描述学习PHP的经历 一.自学的动机: 一定要有浓厚的兴趣,兴趣是最后的老师,可以在你迷茫的时候不断地支撑着你走下去. 自学不是为了工作,不是为 ...

  8. ASP.NET AJAX入门系列(4):使用UpdatePanel控件(一)

    UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加 ...

  9. ASP.NET AJAX入门系列(1):概述

    经常关注我的Blog的朋友可能注意到了,在我Blog的左边系列文章中,已经移除了对Atlas学习手记系列文章的推荐,因为随着ASP.NET AJAX 1.0 Beta版的发布,它们已经不再适用,为了不 ...

随机推荐

  1. RDLC报表数据集的一个细节,导致错误为 尚未数据源提供数据源实例

    报表中,数据集的名字DataSet_CZ, 这里报表这样加载,视乎是的. reportViewer1.LocalReport.DataSources.Add(new Microsoft.Reporti ...

  2. SQLSERVER列出所有用户权限

    --服务器级权限WITH CTE AS(SELECT u.name AS 用户名,u.is_disabled AS 是否禁用,g.name as 服务器角色,'√' as 'flag'FROM sys ...

  3. springmvc整合swagger

    前言 Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模型紧密集 ...

  4. 随手记一 2018/04/23 session和cookie的区别

    1.cookie存放在客户端的浏览器上,session存放在服务器上 2.cookie安全性不高,可以通过分析存放在本地的cookie并且进行cookie欺骗 3.session会在一定时间内保存在服 ...

  5. GHSpro文件上传

    GHSpro文件上传 文章 GHSpro 文件上传 基本设计图 上传 上传方式的选择 采用iframe 的表单上传 ajaxfileupload <div id="step-2&quo ...

  6. Sql语法注意事项

    #分组 group by 作用:group by 子句可以将结果集按照指定的字段值一样的记录进行分组,配合聚合函数 可以进行组内统计的工作. 注意1:当在select中时,查询的内容中如果包含聚合函数 ...

  7. 从头推导与实现 BP 网络

    从头推导与实现 BP 网络 回归模型 目标 学习 \(y = 2x\) 模型 单隐层.单节点的 BP 神经网络 策略 Mean Square Error 均方误差 \[ MSE = \frac{1}{ ...

  8. vscode技巧之代码规范editorconfig

    使用代码片段一键初始化editorconfig样式 第一步,选择文件 第二步,在首选项中选择代码片段 第三步,搜索框中键入properties,并enter键选择进入该文件 第四步,键入下面的代码 { ...

  9. rem的在vue项目中使用配置,,浏览器的兼容性之Mate标签

    在vue中配置rem 位置:在APP.vue的script中,在export default之外 (()=>{ let winW = document.documentElement.clien ...

  10. Java基础之数组(一)

    数组的定义 数组是相同类型数据的有序集合.数组描述的是相同类型的若干个数据,按照 一定的先后次序排列组合而成.其中,每一个数据称作一个元素,每个元素可以通过一个索引(下标)来访问它们.数组的三个基本特 ...