原生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. CodeReview 的经验和原则
			
    资深的程序员都知道 Code Review 可以对代码质量,代码规范,团队代码能力提升带来很大的提升,还有著名的技术专家"左耳朵耗子"也说过: 我认为没有 Code Review  ...
    
			
    2. 
						
  2. Spring——AOP实现
			
    Spring实现AOP 1.什么是 AOP AOP (Aspect Orient Programming),直译过来就是 面向切面编程.AOP 是一种编程思想,是面向对象编程(OOP)的一种补充.面向 ...
    
			
    3. 
						
  3. 题解 P1407
			
    建图方式:旧关系女人连男人,现关系男人连女人(当然,反过来也可以) 原因可以这样考虑: 如果一个男的把女的绿了,那么这个女人就会去找一个她曾经交往过的男人,也就是在这种情况下,某种"影响&q ...
    
			
    4. 
						
  4. Vue-Router 基础入门教程
			
    Vue-Router 基础入门教程 前言 这周的计划是用VUE将之前的小demo的前端给重构了,并且做成前后端分离的样式,因为之前的那个聊天室的demo几乎都是在一个路由上完成的,所以学习Vue-ro ...
    
			
    5. 
						
  5. go语言gRPC系列(三) - 使用grpc-gateway同时提供HTTP和gRPC服务
			
    1. gRPC提供HTTP服务 1.1 存在的意义 1.2 代码示例 1.3 使用postman尝试调用 1.4 gRPC客户端代码调用 2. 使用grpc-gateway同时提供HTTP和gRPC服 ...
    
			
    6. 
						
  6. autotools使用
			
    autotools制作makefile 下面以hello.c来说明生成makefile的过程. 基本步骤如下: 1)autoscan命令生成configure.scan文件,重命名configure. ...
    
			
    7. 
						
  7. JavaScript学习系列博客_28_JavaScript 数组去重
			
    数组去重 var arr = [1,2,3,2,2,1,3,4,2,5]; //去除数组中重复的数字 //获取数组中的每一个元素 for(var i=0 ; i<arr.length ; i++ ...
    
			
    8. 
						
  8. 第1章 Hive入门
			
    第1章 Hive入门 1.1 什么是Hive Hive:由Facebook开源用于解决海量结构化日志的数据统计. Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张表,并提 ...
    
			
    9. 
						
  9. Could not create an acl object: Role '16'
			
    解决方案: (1) 用rm命令一个一个的清除var/cache, var/page_cache, var/di, generated/文件夹下的所有文件 (2) run setup:upgradeco ...
    
			
    10. 
						
  10. 个人项目WordCount(C++/QT)
			
    个人项目WordCount(C++/QT) GitHub项目地址:https://github.com/Nova-cjp/Word-Count 百度云链接:https://pan.baidu.com/ ...
    
			
    11.