原生ajax，基于XMLHttpRequest对象来完成请求

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<h1>XMLHttpRequest - Ajax请求</h1>
    <input type="button" onclick="XmlGetRequest();" value="Get发送请求" />
    <input type="button" onclick="XmlPostRequest();" value="Post发送请求" />

<script src="/statics/jquery-1.12.4.js"></script>
    <script type="text/javascript">

function GetXHR(){
            var xhr = null;
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;

}

function XhrPostRequest(){
            var xhr = GetXHR();
            // 定义回调函数，满足特定条件，才能执行回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据，执行以下操作
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定连接方式和地址----文件方式
            xhr.open('POST', "/test/", true);
            // 设置请求头,django才会将boday内容解析到request.post内
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
            // 发送请求
            xhr.send('n1=1;n2=2;');
        }

function XhrGetRequest(){
            var xhr = GetXHR();
            // 定义回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据，执行以下操作
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定连接方式和地址----文件方式
            xhr.open('get', "/test/", true);
            // 发送请求
            xhr.send();
        }

</script>

</body>
</html>

基于原生AJAX - Demo

XmlHttpRequest对象的主要属性：　　
a. Number readyState
   状态值（整数）
   详细：
      0-未初始化，尚未调用open()方法；
      1-启动，调用了open()方法，未调用send()方法；
      2-发送，已经调用了send()方法，未接收到响应；
      3-接收，已经接收到部分响应数据；
      4-完成，已经接收到全部响应数据；
b. Function onreadystatechange
   当readyState的值改变时自动触发执行其对应的函数（回调函数）
c. String responseText
   服务器返回的数据（字符串类型）
d. XmlDocument responseXML
   服务器返回的数据（Xml对象）
e. Number states
   状态码（整数），如：200、404...
f. String statesText
   状态文本（字符串），如：OK、NotFound...
 
　XmlHttpRequest对象的主要方法：
a. void open(String method,String url,Boolen async)
   用于创建请求   
   参数：
       method： 请求方式（字符串类型），如：POST、GET、DELETE...
       url：    要请求的地址（字符串类型）
       async：  是否异步（布尔类型）
b. void send(String body)
    用于发送请求
    参数：
        body： 要发送的数据（字符串类型）
c. void setRequestHeader(String header,String value)
    用于设置请求头
    参数：
        header： 请求头的key（字符串类型）
        vlaue：  请求头的value（字符串类型）
d. String getAllResponseHeaders()
    获取所有响应头
    返回值：
        响应头数据（字符串类型）
e. String getResponseHeader(String header)
    获取响应头中指定header的值
    参数：
        header： 响应头的key（字符串类型）
    返回值：
        响应头中指定的header对应的值
f. void abort()
    终止请求


　　


 


</script>
												


											
ajax之---原生ajax的更多相关文章
	

    
						
  1. ajax和原生ajax、文件的上传
		
    ajax理解: ajax发送的请求是异步处理的.也就是说如下形式: function f1(){ $.ajax( { ....... success:function(){ a= return a } ...
    
		
    2. 
								
  2. JavaScript之AJAX：原生ajax入门
		
    背景 传统的Web应用允许用户端填写表单(form),当提交表单时就向网页服务器发送一个请求.服务器接收并处理传来的表单,然后送回一个新的网页,但这个做法浪费了许多带宽,因为在前后两个页面中的大部分H ...
    
		
    3. 
						
  3. JavaScript入门之AJAX：原生ajax
		
    背景 传统的Web应用允许用户端填写表单(form),当提交表单时就向网页服务器发送一个请求.服务器接收并处理传来的表单,然后送回一个新的网页,但这个做法浪费了许多带宽,因为在前后两个页面中的大部分H ...
    
		
    4. 
						
  4. django上课笔记7-jQuery Ajax 和 原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享
		
    一.jQuery Ajax 和 原生Ajax from django.conf.urls import url from django.contrib import admin from app01  ...
    
		
    5. 
						
  5. JavaScript的原生Ajax解析
		
    通过JavaScript的Ajax进行详细的解析过程,从而更好的了解Jquery的Ajax. 顺带,我会在后面把我整理的一整套CSS3,PHP,MYSQL的开发的笔记打包放到百度云,有需要可以直接去百 ...
    
		
    6. 
						
  6. 原生Ajax
		
    使用原生Ajax 验证用户名是否被注册 创建出注册信息: <h1>注册信息</h1><input type="text" name="txt ...
    
		
    7. 
						
  7. JS原生ajax与Jquery插件ajax深入学习
		
    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
    
		
    8. 
						
  8. 原生Ajax 和Jq Ajax
		
    前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...
    
		
    9. 
						
  9. 手写原生ajax
		
    关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. MySQL字符集操作
			
    一.查看编码 show variables like 'character%'; 二.临时设置编码 1.set names xxx set names ${编码}; "set names x ...
    
			
    2. 
						
  2. 精讲RestTemplate第7篇-自定义请求失败异常处理
			
    本文是精讲RestTemplate第7篇,前篇的blog访问地址如下: 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用 精讲RestTemplate第2篇-多种底层H ...
    
			
    3. 
						
  3. 【算法•日更•第十二期】信息奥赛一本通1585：【例 1】Amount of Degrees题解
			
    废话不多说,直接上题: 1585: [例 1]Amount of Degrees 时间限制: 1000 ms         内存限制: 524288 KB提交数: 130     通过数: 68 [ ...
    
			
    4. 
						
  4. eric4 编译 中文 控件 报错 解决
			
    eric4 在qt设计师界面, 设计 中文名控件 时,有时候不能编译,报错如下: 解决办法: 打开eric4---setting----preferences 按下图操作后 ,重新启动eric4即可解 ...
    
			
    5. 
						
  5. 一个@Transaction哪里来这么多坑？
			
    前言 在之前的文章中已经对Spring中的事务做了详细的分析了,这篇文章我们来聊一聊平常工作时使用事务可能出现的一些问题(本文主要针对使用@Transactional进行事务管理的方式进行讨论)以及对 ...
    
			
    6. 
						
  6. git操作练习
			
    github账号注册很久了,使用过idea的版本管理,但是命令行还不会.正好新写了一个小项目,练习一下如何上传到github. @ 目录 新建github仓库 安装git 上传项目 1.创建本地版本库 ...
    
			
    7. 
						
  7. gpio模拟i2c驱动
			
    前段时间做项目,需要gpio模拟i2c通信,最后参考了一些资料,然后编写了一个程序.现在发出来,以免以后忘记,也为一些需要的朋友提供参考.不喜勿喷哈. /* 说明:该程序是基于atmel公司的sama ...
    
			
    8. 
						
  8. golang rpc demo
			
    RPC工作流程图 1.调用客户端句柄:执行传送参数 2.调用本地系统内核发送网络消息 3.消息传送到远程主机 4.服务器句柄得到消息并取得参数 5.执行远程过程 6.执行的过程将结果返回服务器句柄 7 ...
    
			
    9. 
						
  9. 手把手教Linux驱动3-之字符设备架构详解，有这篇就够了
			
    一.Linux设备分类 Linux系统为了管理方便,将设备分成三种基本类型: 字符设备 块设备 网络设备 字符设备: 字符(char)设备是个能够像字节流(类似文件)一样被访问的设备,由字符设备驱动程 ...
    
			
    10. 
						
  10. 更改默认Xcode
			
    更改默认 Xcode 的指令: sudo xcode-select -switch /Applications/Xcode.app  如果系统里面有好几个版本的 Xcode,可以用这个命令指定默认的  ...
    
			
    11.