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 (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/demo_get.asp?t=" + Math.random(),true);//清除缓存
xmlhttp.send();
}

3.响应

如果来自服务器的响应并非 XML,请使用 responseText 属性。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt; 4.XMLHttpRequest对象有以下属性:
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪
status

200: "OK"

404: 未找到页面

原生 ajax的更多相关文章

  1. 原生Ajax

    使用原生Ajax 验证用户名是否被注册 创建出注册信息: <h1>注册信息</h1><input type="text" name="txt ...

  2. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  3. 原生Ajax 和Jq Ajax

    前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...

  4. 手写原生ajax

    关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...

  5. 浅谈AJAX的基本原理和原生AJAX的基础用法

    一.什么是AJAX? AJAX,即"Asynchronous Javascript And XML",翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技 ...

  6. python_way day21 Django文件上传Form方式提交,原生Ajax提交字符处啊,Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式,Django验证码,抽屉示例,

    python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...

  7. [译]脱离jQuery,使用原生Ajax

    脱离jQuery,使用原生Ajax 标签: Ajax translate 英文出处:<A Guide to Vanilla Ajax Without jQuery> 翻译: 刘健超 J.c ...

  8. Day21 Django之Form文件上传、原生Ajax和实现抽屉实例

    一.Form文件上传 """ Django settings for prev_chouti project. Generated by 'django-admin st ...

  9. 原生AJAX如何异步提交数据?

    AJAX概述 AJAX:Asynchronous Javascript And XML,异步的JS和XML.2001,Google为了改进搜索的用户体验,提出了GoogleSugguest效果,正式提 ...

  10. js原生Ajax的封装与使用

    一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest ...

随机推荐

  1. AD PCB中两个不同高度器件重叠 软件报警告变绿

    这个问题遇到几次了,每次都要在网上搜索解决方法,今天记下来! 在规则里面不检查器件高度这项应该是最简单,也不影响其他规则的方法了! 具体操作: Design - rules - Component C ...

  2. Linux系统java环境jdk的安装

    在linux环境中jdk的安装有两种方式,一为rpm安装机制,另一种为源码安装(已编译好)因此在ORACLE官网提供两种安装文件,一为rpm格式,另一种为gz格式,两种的安装方式都大同小异的. 1.r ...

  3. How are you vs How are you doing

    How are you与How are you doing,有何不同呢? 貌似没有不同…… 中国教科书式的回答是"Fine, thank you, and you?" 随便一点&q ...

  4. iOS - viewDidLoad, viewWillDisappear, viewWillAppear区别及加载顺序

    viewWillAppear: Called when the view is about to made visible. Default does nothing视图即将可见时调用.默认情况下不执 ...

  5. linux安装环境

    我用的是Linux ubuntu 3.19.0-25-generic #26~14.04.1-Ubuntu SMP Fri Jul 24 21:16:20 UTC 2015 x86_64 x86_64 ...

  6. New text file line delimiter

    Window -> Preferences -> General -> Workspace : Text file encoding :Default : 选择此项将设定文件为系统默 ...

  7. Pycharm中如何使用科学计算库

    1.简便起见 比起麻烦的安装各种库,我们选择最方便的Anaconda的conda或pip(兼容支持)安装相关库. Pycharm本身缺少numpy和matplotlib这些库,而另一个Python的开 ...

  8. tcpdump抓包二进制tcp协议详细分析

    1.tcpdump -i eth0 port 11751 and src host 192.168.1.34 -x -s0 tcpdump: verbose output suppressed, us ...

  9. function &w(){}

    CodeIgniter 3.1.0 <?php //\system\core\Common.php function &load_class($class, $directory = ' ...

  10. ElasticSearch报 EsThreadPoolExecutor[search, queue capacity = 1000, org.elasticsearch.common.util.concurrent.EsThreadPoolExecutor@c0efba

    ElasticSearch报以下错误的解决办法: "type": "es_rejected_execution_exception", "reason ...