原生Ajax总结

HTTP协议

传统的请求和Ajax请求

Ajax定义

Asynchronous JavaScript and XML. Ajax异步的,JavaScript程序希望与服务器直接通信而不需要重新加载页面。

Ajax基本流程

1.创建请求对象

function requestObject(){
            if(window.XMLHttpRequest){
                return new XMLHttpRequest();
            }else if{
                return new ActiveXObject(‘Mxsml2.XMLHTTP‘);
            }else{
                throw new Error("Could not create HTTP request object.");
            }
        }

2.建立请求
var request=requestObject();
request.open("GET","data.txt",true);

3.发送请求

request.send(null);

4.处理请求(XML和JSON两种格式)

request.onreadystatechange=function(){            if(request.readyState==4){                console.log(request.status+":"+request.statusText);
            }
        }
时间: 2024-09-03 04:00:20

原生Ajax总结的相关文章

jQuery_review之 原生Ajax的写法

最低层的ajax的实现是基于浏览器的一个标准,就是XMLHttpRequest对象,这种对象在MS浏览器上面的实现与其他浏览器上面的实现是不一样的.尽管现在非常多的第三方框架采用"模板模式"封装了如何获取XMLHttpRequest对象以及如何发送和处理中间出现的异常,但是还是非常有必要对ajax进行一次复习,这样才能在看其他的方法的时候温故而知新的效果. 编写原生的ajax的代码,需要需要采用的步骤是,首先,我们应当在function中定义一个XMLHttpRequest的变量对象,

JS原生Ajax请求

摘录一个JS原生Ajax请求行为,原文地址:http://caibaojian.com/ajax-jsonp.html ajax({ url: "./TestXHR.aspx", //请求地址 type: "POST", //请求方式 data: { name: "super", age: 20 }, //请求参数 dataType: "json", success: function (response, xml) { //

原生ajax基础知识笔记

原生ajax基础知识笔记 1.创建 XMLHttpRequest 对象 所有现代浏览器(IE7+.Firefox.Chrome.Safari 以及 Opera)均内建 XMLHttpRequest 对象. 老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveXObject. 代码示例: // Creates a XMLHttpRequest object. var xhr = new XMLHttpRequest(); 兼容浏览器代码示例: var xhr; /

JavaScript的原生Ajax解析

通过JavaScript的Ajax进行详细的解析过程,从而更好的了解Jquery的Ajax. 顺带,我会在后面把我整理的一整套CSS3,PHP,MYSQL的开发的笔记打包放到百度云,有需要可以直接去百度云下载,这样以后你们开发就可以直接翻笔记不用百度搜那么麻烦了.  笔记链接:http://pan.baidu.com/s/1qYdQdKK 密码:pvj2   一.JavaScript原生ajax1.原生ajax代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

原生Ajax 和Jq Ajax

前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的位置.打开时,在浏览器地址栏输入"localhost/指定页面"或者"127.0.0.1/指定页面"打开. 下面列出demo的HTML.PHP.原生ajax .jq ajax代码. HTML代码: <!doctype html> <html> &

原生Ajax实现异步通信

昨天我们用JQuery.Ajax讲解了JQuery如何通过Ajax实现异步通信,为了更好的编织知识网,今天我们用一个Demo演示如何用javascript实现原生Ajax的异步通信. 原生Ajax实现异步通信分为以下5步: 1.创建XMLHttpRequest对象: 2.注册回调方法: 3.设置和服务器端交互的参数 4.设置向服务器端发送的数据,启动和服务器端的交互: 5.写回调方法 有了这5步的思想指导,下面我们开始设计实现过程. 首先我们新建一个html页面,用于和用户交互,代码如下: <!

原生ajax与封装的ajax使用方法

当我们不会写后端接口来测试ajax时,我们可以使用node环境来模拟一个后端接口. 1.模拟后端接口可参考http://www.cnblogs.com/heyujun-/p/6793900.html网站整站开发小例子,在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express --save,安装express中间件. 2.把当中的app.js的内容换成 var express=require('express'); //var path=require('path'

JavaWEB小知识学习--原生AJAX

AJAX的作用局部刷新,作为提升页面体验还是很重要的,不过大家都说对SEO不是很友好,一直使用jQuery封装的AJAX,没有了解过原生的是什么样子的,特此学习下,补充知识 1.原生AJAX的Get方式 页面中定义一个a标签.想要实现的效果点击a标签,能够请求服务器,弹出服务器返回的字段 <body> <a href="/ajaxTest">点击我!</a> </body> 对应的AJAX请求如下,注释步骤很详细的 //具体的函数可以参考

原生ajax调用数据简单实例代码

原生ajax调用数据简单实例代码:由于jQuery的盛行,现在使用较多的是jQuery封装好了的ajax,因为解决了浏览器兼容性问题,这对程序员来说就等于去掉了一个心头大患,但并非原生ajax就销声匿迹,并且本人感觉还是对原生的ajax有所了解的好,下面就是一段ajax数据调用的实例代码,非常的简单,初学者可以参考一下.代码如下:一.兼容浏览器部分: function xmlHttpR() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=ne

原生 ajax

1.创建XMLHttpRequest对象 var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } 2.发送请求 var xmlhttp;if (wi