AJAX--XMLHttpRequest五步使使用方法
传统浏览方式和AJAX方式的不同
多数Web应用程序都使用请求/响应模型从server上获得完整的HTML页面。经常是点击一个button,等待server对应,在点击还有一个button。然后在等待,这样一个重复的过程。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemx0czAwMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
而AJAX是一种创建交互式网页的网页开发技术。当中XMLHttpRequest是核心的内容,它可以为页面中的javascript脚本提供特定的通信方式。从而使页面的javascript脚本和server之间形成动态交互的效果。XMLHTTPRequest的最大的长处是页面内的javascript脚本可以不用刷新页面,而直接和server发生交互。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemx0czAwMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
XMLHTTPRequest的五步使使用方法
1、建立XMLHTTPRequest对象
//1.创建XMLHTTPRequest对象
if(window.XMLHttpRequest){
//alert("IE7,IE8,FireFox");
xmlhttp =new XMLHttpRequest();
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//alert("IE6,IE5.5,IE5");
var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP","Miscrosoft XMLHTTP"];
for(var i=0;i<activexName.length;i++) {
try{
xmlhttp=new ActiveXObject(activexName[i]);
break;
}catch(e){ }
}
}
if(xmlhttp == undefined || xmlhttp == null){
alert("当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器");
return;
}
array.push(xmlhttp.readyState);
2、注冊回调函数
xmlhttp.onreadystatechange=callback;
要注意的是callback不能写成callback(),我们是想把方法名告诉onreadystatechange这个属性,假设加了括号,就相当于把返回值告诉了onreadystatechange属性。
3、使用open方法设置和server端交互的基本信息
有两种方法
//GET方式交互
xmlhttp.open("GET","AJAX? name=" + userName,true); //POST方式交互
xmlhttp.open("POST","AJAX",true);
//POST方式交互所需添加的代码
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
4、设置发送的数据,開始和server端交互
//GET方式
xmlhttp.send(null); //POST方式
xmlhttp.send("name=" + userName);
5、更新界面
在回调函数中推断交互是否结束,响应是否正确。并依据须要获取server返回的数据。并更新页面
array.push(xmlhttp.readyState);
//推断和server端的交互是否完毕,还要推断server端是否正确返回了数据
if(xmlhttp.readyState == 4){
//表示和server端的交互已经完毕
if(xmlhttp.status == 200){
//表示server的是响应代码是200。正确返回了数据
var message=xmlhttp.responseText;
//XML数据相应的DOM对象的接受方法
//使用的前提是,server端须要设置contenttype为text/xml //记忆像div标签中填充文本内容的方法
var div=document.getElementById("message");
div.innerHTML=message;
alert(array);
}
}
总结
初步了解XMLHTTPRequest对象的使用,便于以后更深入的去了解和使用。
AJAX--XMLHttpRequest五步使使用方法的更多相关文章
- Ajax学习(三)——XMLHttpRequest对象的五步使使用方法
Ajax的核心技术是XMLHttpRequest对象,它能够在不向server提交整个页面的情况下.实现局部更新网页.通过这个对象,Ajax能够像桌面应用程序那样仅仅与server进行数据层的 ...
- AJAX核心--XMLHttpRequest五步法
引言: AJAX=异步Javascript + XML,AJAX是一种用于创建高速动态网页的技术. 开门见山: 解读:AJAX使用XHTML和CSS为网页表示.DOM动态显示和交互,XML进行数据交换 ...
- 五步教你实现使用Nginx+uWSGI+Django方法部署Django程序
Django的部署可以有很多方式,采用nginx+uwsgi的方式是其中比较常见的一种方式. 在这种方式中,我们的通常做法是,将nginx作为服务器最前端,它将接收WEB的所有请求,统一管理请求.ng ...
- 不同浏览器创建 ajax XMLHTTPRequest对象的方法及兼容性问题总结
XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpReques ...
- 【转载并整理】AJAX XmlHttpRequest对象详解
一. XMLHttpRequest由来及原生介绍 XMLHttpRequest(XHR)是一个API对象,其中的方法可以用来在浏览器和服务器端传输数据.这个对象是浏览器的js环境提供的.从XHR获取数 ...
- C语言程序设计入门学习五步曲(转发)
笔者在从事教学的过程中,听到同学抱怨最多的一句话是:老师,上课我也能听懂,书上的例题也能看明白,可是到自己动手做编程时,却不知道如何下手.发生这种现象的原因有三个: 一.所谓的看懂听明白,只是很肤浅的 ...
- Js--AJAX的小知识(一):ajax的五种状态
一.ajax的五种状态(readyState ) 0 - (未初始化)还没有调用send()方法 1 - (载入)已调用send()方法,正在发送请求 2 - (载入完成)send()方法执行完成,已 ...
- ajax——XMLHttpRequest
XMLHttpRequest对象.能够让ajax程序在不又一次载入的页面的情况下更新页面数据,页面载入完毕后从server接受发生数据.这样既减轻了server负担又回顾了响应速度,缩短了用户的等待时 ...
- ElasticSearch第五步-.net平台下c#操作ElasticSearch详解
前面我们讲解了关于ElasticSearch的安装配置,以及CRUD 本章我将讲解怎么使用c#操作ElasticSearch. 首先你需要一定的技术储备,比如:asp.net webapi,mvc,j ...
随机推荐
- hiho1509 异或排序
题目链接 题目大意: 给定一个长度为 n 的非负整数序列 a[1..n] 你需要求有多少个非负整数 S 满足以下两个条件: (1).0 ≤ S < 260 (2).对于所有 1 ≤ i < ...
- [Python随笔]>>字符串大小写是如何转换的?
首先看下Python的源码 Emmmm,说明是底层的C实现的,所以只放了说明 再看看别人家孩子的博客:https://blog.csdn.net/world6/article/details/6994 ...
- C# treeview绑定
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) ...
- 通过nodeSelector配置项实现pod部署至指定node
Node节点添加标签 [root@node1 work]# kubectl label nodes node1 node=master --overwrite node/node1 labeled [ ...
- 微信小程序 上传图的功能
首先选择图片,然后循环,再就是在点击发布的时候循环图片地址赋值,包括删除命令 js代码: //选择图片 uploadImgAdd: function(e) { var imgs = this.data ...
- 你可能需要了解下Laravel集合
前言 集合通过 Illuminate\Support\Collection 进行实例,Laravel的内核大部分的参数传递都用到了集合,但这并不代表集合就是好的.Laravel作为快捷并优雅的开发框架 ...
- 洛谷 P2128 赤壁之战
P2128 赤壁之战 题目描述 赤壁之战,黄盖率舰满载薪草膏油诈降曹军. 受庞统所授的连环计,曹军战船之间由铁索相连,没有两艘战船在同一位置,也没有铁索两两相交或穿过战船.每艘船都有其一定的战略价值. ...
- asp.net 缓存公共类
using System; using System.Collections.Generic; using System.Text; using System.Web; using System.We ...
- Python Tkinter 基础控件学习
# -*- coding: utf-8 -*- from Tkinter import * def btn_click(): b2['text'] = 'clicked' evalue = e.get ...
- powershell输出错误信息到文件
https://stackoverflow.com/questions/8925323/redirection-of-standard-and-error-output-appending-to-th ...