Ajax整合了JavaScript、xml、CSS等现有技术而成,全称为Asynchronous JavaScript And XML,即异步的 JavaScript和xml。它使用了JavaScript通过XMLHttpRequest对象异步发送请求到服务器,然后根据结果,使用JavaScript和CSS局部更新相应网页的任务过程,其中XML用来封装请求和响应数据,CSS用来美化网页样式。
Ajax的关键元素:
JavaScript:Ajax技术的主要开发语言。
DOM(文档对象模型):通过DOM属性或方法修改局部元素,实现页面局部刷新。
CSS样式表:改变样式,美化页面效果,提升用户体验度。
XMLHttpRequest对象(Ajax核心):以异步的方式在客户端与服务器之间传递数据。
XMLHttpRequest对象的常用方法和属性
常用方法:
open(method,url,asyncl):用于创建一个新的Http请求,并制定此请求的
方法、URL、是否异步提交及验证信息true或false。
send(String):发送请求到服务器。
注意:String仅用于post方法,get方法为空或null
abort();取消 当前请求。
setRequestHeader():单独指定请求某个Http头。
getResponseHeader():从响应中获取指定的Http头。
getAllResponseHeaders():获取响应的所有Http头。
常用属性:
readyState:返回请求的当前状态。(readyState常用值是:0表示未初始化,
1表示初始化,2表示发送数据,3表示数据传送中,4表示数据接收完毕)
status:返回当前请求的Http状态码。(200表示正确返回,404表示找不到访问对象)
responseText:以文本形式获取响应值。
reponseXML:以XML形式获取响应值,并且解析成DOM对象返回。
statusText:返回请求的响应行代码。
onreadystatechange:设置回调函数。
Ajax的使用步骤:
1.创建XMLHttpRequest对象,通过window.XMLHttpRequest的返回值判断
XMLHttpRequest对象的方式。
2.设置回调函数,通过onreadystatechange属性设置回调函数,函数需要自定义。
3.初始化XMLHttpRequest组件。通过open()方法创建一个设置发送方式和请求路径
的Http请求。
4.发送请求。
发送get请求及处理文本方式响应:
//1.创建XMLHttpRequest对象
if(window.XMLHttpRequest){//返回时true时,说明是新版本IE或其他浏览器
xmlHttpRequest=new XMLHttpRequest();
}else{
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.设置回掉函数
xmlHttpRequest.onreadystatechange=callBack;
//3.初始化XMLHttpRequest组件
xmlHttpRequest.open("GET",url,true);
//4.发送请求
xmlHttpRequest.send(null);//GET方法为空或null
//回调函数callBack
function callBack(){
if( xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
var b=xmlHttpRequest.responseText;
根据不同的返回类型处理向响应
..........
}
}
发送post请求及处理文本方式响应:
//加粗部分是与get请求的区别
//1.创建XMLHttpRequest对象
if(window.XMLHttpRequest){//返回时true时,说明是新版本IE或其他浏览器
xmlHttpRequest=new XMLHttpRequest();
}else{
//付过是IE5,IE6低版本的浏览器
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.设置回掉函数
xmlHttpRequest.onreadystatechange=callBack;
//3.初始化XMLHttpRequest组件
xmlHttpRequest.open("POST",url,true);
//请求头部信息的格式
xmlHttpRequest.setRuquestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求
var userinfo="uname="+uname;//需要发送的数据信息
xmlHttpRequest.send(userinfo);
发送GET请求及处理XML方式响应:
在处理XML方式响应时,需要使用XMLHttpRequest对象的responseXML属性得到服务器端
生成的XML文档,responseXML返回的并不是简单的字符串,是一个XmlDocument对象,因此要处理XML方式的响应,需要先了解如何使用XmlDocument 对象获取服务器端返回的数据信息。
XmlDocument的常用属性与方法:
属性:
attributes:当前节点的属性集合。
childNodes:当前节点的所有子节点。
firstChild:节点的第一个子节点。
方法:
getElementsByTagName():用来获取指定节点名的节点对象集合,参数为节点名
称字符串。
selectSingleNode():用来获取符合条件的第一个节点对象。
selectNode():用来获取符合条件的节点对象集合。
回调函数中处理XML响应的方法:
function callBack(){
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
//获取服务器端返回的XML形式的文档对象
//加黑部分是与文本响应方式的区别
var dom=xmlHttpRequest.responseXML;
if(dom){
//获取节点名为“username”的节点对象集合
var userNodes=dom.getElementsByName("username");
if(userNodes.length>0){
//获取该节点对象中的第一个子节点
var username=userNodes[0].firstChild.nodeValue;
document.getElementById("username").value=username;
}
}
}
}
一般都是jQuery与Ajax一起使用,原生用起来麻烦。
- 使用python原生的方法实现发送email
使用python原生的方法实现发送email import smtplib from email.mime.text import MIMEText from email.mime.multipart ...
- 原生js方法document.getElementsByClassName在ie8及其以下的兼容性问题
document.getElementsByClassName在ie8及其以下浏览器的兼容性问题,在ie8及其以下浏览器中不能使用,针对这个问题,下面给出详细的解决方法,感兴趣的朋友可以参考下 ...
- AJAX的get和post请求原生编写方法
var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if(xhr.readyState===4){ if(xhr.stat ...
- javascript原生bind方法ie低版本兼容详解
上一篇文章讲到了javascript原生的bind方法: http://www.cnblogs.com/liulangmao/p/3451669.html 这篇文章就在理解了原生bind方法的原理以后 ...
- Java安全之原生readObject方法解读
Java安全之原生readObject方法解读 0x00 前言 在上篇文章分析shiro中,遇到了Shiro重写了ObjectInputStream的resolveClass导致的一些基于Invoke ...
- 常用原生JS方法总结(兼容性写法)
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
- javascript原生bind方法详解
bind()方法,是javascript原生的函数类的一个原型方法(即Function.prototype里的方法),不支持ie低版本. 基本格式: function.bind(obj1,obj2,o ...
- 几个原生js方法总结
一.document.getElementById('emoji').addEventListener('click', function(e) { var emojiwrapper = docume ...
- 浏览器中的原生base64方法
在web开发中,经常涉及到对文本.文件等进行base64编码处理,在之前的开发中,使用js-base64来进行处理,但其实浏览器已经原生包含了处理方法.性能更好,兼容性也更高. atob() - AS ...
随机推荐
- Open XML 检索 EXCEL
1.Excel 隐藏行判断 项目的 Hidden 属性不为 null,且 Hidden 属性的值为 True var itemList = ws.Descendants<Row>(). W ...
- jenkins 学习记录2
主题 在之前的学习中(http://www.cnblogs.com/abcwt112/p/6274575.html)我已经学会怎么打包了..这篇文章记录分享我学习如何利用jenkins将打完的包发布到 ...
- Java多线程-新特征-信号量Semaphore
简介信号量(Semaphore),有时被称为信号灯,是在多线程环境下使用的一种设施, 它负责协调各个线程, 以保证它们能够正确.合理的使用公共资源. 概念Semaphore分为单值和多值两种,前者只能 ...
- schedule和scheduleAtFixedRate的区别
- Java虚拟机(二):垃圾回收算法
一.介绍 GC(Garbage Collection),垃圾收集 Java中,GC的对象是堆空间和永久区 二.GC算法 1. 引用计数法 老牌垃圾回收算法 通过引用计算来回收垃圾 Java中未使用,使 ...
- PHP开发札记-星期/周操作中常用的日期获取方法
本周一echo date('Y-m-d',(time()-((date('w')==0?7:date('w'))-1)*24*3600)); //w为星期几的数字形式,这里0为周日 本周日 echo ...
- ROS indigo 删除和安装
删除比较容易: sudo apt-get remove ros-jade-desktop-full 但是如果怕删不干净可以采用: sudo apt-get remove ros-* ,但是不确定会 ...
- C++ 输出精度和输出小数点位数
有时候需要调节小数点的精度或者位数 #include<iostream> #include<iomanip> using namespace std; //设置数据精度 set ...
- Anaconda( different versions) configuration in ubuntu 14
1. 安装自己经常使用的Anaconda版本 sh ./Anaconda3-5.0.1-Linux-x86_64.sh 2. 默认安装到 /home/usr/anaconda3下面,在anaconda ...
- poj1722 SUBTRACT
应该是基础的dp练手题 线性dp最主要的就是关于阶段的划分,这个题中我没想到的一点就是开状态的时候使用了前i个数能合成的数来记录 我自己的想法就是类似于区间dp这样的记录方法,这种方法确实开了很多冗余 ...