原生的ajax

异步JavaScript和XML,AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。

这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

步骤:
1.创建一个核心对象 XMLHttpRequest

xmlhttp=null;
if (window.XMLHttpRequest){
    // code for Firefox, Opera, IE7, etc.
    xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject){
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2.编写一个回调函数

xmlhttp.onreadystatechange=function(){
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
        //接受服务器回送过来的数据
        alert(xmlhttp.responseText);
    }
}

3.编写请求方式和请求的路径(open操作)

xmlhttp.open("请求方式","URL");

4.发送请求(send操作)

xmlhttp.send();

ajax-api详解
常用属性:
onreadystatechange:检测readyState状态改变的时候
readyState:ajax核心对象的状态
0:核心对象创建
1:调用了open方法
2:调用了send方法
3:部分响应已经生成(没有意思)
4:响应已经完成(使用的是这个状态)
status:状态码
if(xmlhttp.readyState==4 && xmlhttp.status==200){
}
responseText:响应回来的文本
常用方法:
open("请求方式","请求路径"[,"是否异步"]):设置请求的方式和请求的路径
send(["参数"]):发送请求 参数是请求方式为post的时候的参数
setRequestHeader("content-type","form表单enctype属性"):设置post请求的参数的类型 必须放在send方法之前.

时间: 2024-12-31 03:41:48

原生的ajax的相关文章

js原生实现ajax

今天来总结一下javascript原生实现ajax数据请求. 一:什么是AJAX: 二:AJAX有什么优势: 二:AJAX的工作原理: 三:AJAX的用途: 一:什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 关键词

jQuery的ajax和原生的ajax方法

jQuery的ajax方法: $.ajax({ url:'/comm/test1.php', type:'POST', //GET async:true, //或false,是否异步 data:{ name:'yang',age:25 }, timeout:5000, //超时时间 dataType:'json', //返回的数据格式:json/xml/html/script/jsonp/text beforeSend:function(xhr){ console.log(xhr) consol

原生的AJAX写法,可以直接复制过来套用

方法一: function createXMLHTTPRequest() { //1.创建XMLHttpRequest对象 //这是XMLHttpReuquest对象无部使用中最复杂的一步 //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码 var xmlHttpRequest; if (window.XMLHttpRequest) { //针对FireFox,Mozillar,Opera,Safari,IE7,IE8 xmlHttpRequest = new XMLHttpR

原生实现ajax解析--XMLHttpRequest

ajax基础: Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求. 如果仔细观察一个Form的提交,你就会发现,一旦用户点击“Submit”按钮,表单开始提交,浏览器就会刷新页面,然后在新页面里告诉你操作是成功了还是失败了.如果不幸由于网络太慢或者其他原因,就会得到一个404页面.一次HTTP请求对应一个页面. 如果要让用户留在当前页面中,同时发出新的HTTP请求,就必须用JavaScript发送这个新请求,接收到数据后,再用Java

原生的Ajax的实现

<script type="text/javascript"> // Ajax固定的模版 // 第一步:创建xhr对象,使用new关键字来调用内置的构造函数  var xhr = new XMLHttpRequest(); // 第二步:指定接收回来的内容.监听xhr // 对象的onreadystatechange事件,这个事件xhr对象的"就绪状态"改变的时候触发.我们只关心就绪状态为4的时候的事情: xhr.onreadystatechange =

2、.net NVelocity中原生javascript ajax封装使用

在页面上,我们经常会遇到局部刷新的例子,这个时候,就需要用到ajax, 因为很多代码都是公用的,所以我们想到了,将代码封装,简化了使用,减少了冗余 javascript ajax代码如下: var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性 xmlhttp.open("POST", "AJ

原生 JS Ajax,GET和POST 请求实例代码

javascript/js的ajax的GET请求代码如下所示: <script type="text/javascript"> /* 创建 XMLHttpRequest 对象 */ var xmlHttp; function GetXmlHttpObject(){ if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();

原生JavaScript+ajax

在网上找了几个帖子,但是由于水平有限,折腾了一会才实现了一个小程序.理论理解之后,加之一个实际Demo,对于新手理解ajax是很容易的. 我将具体的代码都贴上,方便和我一样初次学习的人理解. 操作步骤如下: 首先是请求页面的前台代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equ

原生js ajax实例

了解Ajax的工作原理,就要从理解XMLHttpRequest这个对象开始. 下面给出将要用于该对象的很少的几个 方法和属性.  ·open():建立到服务器的新请求.     ·send():向服务器发送请求.     ·abort():退出当前请求. ·readyState:提供当前 HTML 的就绪状态. ·responseText:服务器返回的请求响应文本. 'onreadystatechange:回调方法 ·responseXML:服务器返回的请求响应XML形式组织的文本. 获取响应文