原生js中ajax写法一:

function ajaxys(){
  //1、 创建xhr对象
  var xhr = new XMLHttpRequest();//XMLHttpRequest()
  // 2、打开浏览器的连接
  xhr.open('get','112.json',true);
  // 3、请求发送给服务器,对于get来说send里的参数为空或者null
  xhr.send();//或者xhr.send(null)
  // 4、判断服务器的状态,若准备就绪,就去获取数据
  xhr.onreadystatechange = function(){
    if (xhr.readyState == 4) {//证明服务器已经准备就绪
      if (xhr.status == 200) {//页面请求成功
        // var txt = xhr.responseText;//表示取出数据

        document.getElementById('boxs').innerHTML = xhr.responseText;//表示取出数据,并把数据复制给boxs
      }
    }
  }

}

//当点击btn按钮时触发对ajax的请求

$('#btn').click(function(){
  ajaxys();//执行ajax的请求
});

原生js中写ajax的方法二:(利用回调函数callback)

//先声明一个异步请求对象
var xmlHttpReg = null;
function ajax() {
  if (window.ActiveXObject) {//如果是IE
    xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");
  } else if (window.XMLHttpRequest) {
    xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg
  }

  //如果实例化成功,就调用open()方法,就开始准备向服务器发送请求
  if (xmlHttpReg != null) {
    xmlHttpReg.open("get", "checknumber.php?type="+gametype+"&round="+gameroundno, true);
    xmlHttpReg.send();
    xmlHttpReg.onreadystatechange = doResult; //设置回调函数
  }
}
//设定函数doResult(),便于调用
function doResult() {
  if (xmlHttpReg.readyState == 4 && xmlHttpReg.status == 200) {//4代表执行完成
    document.getElementById("content").innerHTML = xmlHttpReg.responseText;
  }
}

原生的js的ajax写法主要有三点:

  1、创建异步请求对象 :   异步请求对象要兼顾IE和标准的浏览器

 

3、状态与响应 

javascript中ajax的四大步骤的更多相关文章

  1. javaScript中ajax、axios总结

    一.原生js实现ajax请求: 步骤: get请求: // 1.创建一个XMLHttpRequest的对象. var xml=null; //初始值设为空 if(XMLHttpRequest){ xm ...

  2. JavaScript中Ajax的使用

    AJAX全称为“Asynchronous javascript and XML”(异步javascript和XML),是指一种创建交互式网页应用的网页开发技术.通过在后台与服务器进行少量数据交换,AJ ...

  3. JavaScript中Ajax

    Ajax技术,就是指:向服务器请求额外的数据而无须重新加载整个页面.其核心就是 XMLHttpRequest对象.(简称:XHR) 在这里,我们先讨论IE7及更高版本,以及FF,Opera,Chrom ...

  4. javascript中ajax post实例详解

    一,原生态的XMLHttpRequest 代码如下 复制代码 <script language="javascript">         function savei ...

  5. JavaScript中Ajax的get和post请求

    AJAX = 异步 JavaScript和XML(Asynchronous JavaScript and XML) 作用:在不重新加载整个网页的情况下,对网页的某部分进行更新.   两种请求方式: 1 ...

  6. JavaScript中Ajax的用法

    XMLHttpRequest 对象的属性和方法: open(method,url,async) 规定请求的类型.URL 以及是否异步处理请求 send(string)   将请求发送到服务器. res ...

  7. javascript中Ajax的简单封装

    GET方式的在线:DEMO POST方式在线:DEMO // 1.封裝AJAX函數 function nativeAjax(option,success,error){ // 定义domain,方便环 ...

  8. Ajax原生四大步骤

    1.首先创建一个js文件夹名为common.js.创建一个createXhr()的函数.在此方法中创建异步对象XMLHttpRequest,后面使用的时候直接引入common.js文件,然后进行调用就 ...

  9. Javascript 中ajax实现前台向后台交互

    第一种情况:前台传入字符串参数 后台返回json字符串.或是json数组  代码如下: 前台: $.ajax({ url: "xxx/xxx.action", data: &quo ...

随机推荐

  1. 用C#代码来安装、卸载、启动、关闭服务

    /// <summary>        /// 启动服务         /// </summary>        /// <param name="sen ...

  2. zabbix3.0对tcp连接数和状态的监控优化

    zabbix3.0对tcp连接数及状态的监控优化 之前对tcp的监控采用netstat命令,发现在服务器繁忙的时候效果不理想,这个命令占用大量的cpu有时候高达90%以上,可能会导致业务的不稳定,所以 ...

  3. Spring_使用XML文件的方式配置事务

    步骤: 正常配置jdbctemplate 正常配置bean 配置事物管理器 配置事物管理器 配置aop切入点,通过切入点把事物链接起来 思路: 接着上一个买书的例子吧,直接拷到新包下,把注解都干掉,需 ...

  4. Java基础94 分页查询(以MySQL数据库为例)

    1.概述 分页查询,也可叫做分批查询,基于数据库的分页语句(不同数据库是不同的).  本文使用的事MySql数据库.       假设:每页显示10条数据.       Select * from c ...

  5. oracle 各个版本下载地址

    Oracle9i Database Release 2 Enterprise/Standard/Personal Edition for Windows NT/2000/XP http://downl ...

  6. RzPageControl 关闭按钮

  7. python接口自动化测试二十九:yaml配置文件的写和读

    # 先安装ruamel.yaml模块 写入配置文件: import os# 先安装ruamel.yaml模块from ruamel import yaml # 将字典写入到yamldict = { ' ...

  8. Spring启动研究2.AbstractApplicationContext.obtainFreshBeanFactory()研究

    据说这个方法里面调用了loadBeanDefinitions,据说很重要,并且跟我感兴趣的标签解析有关,所以仔细看看 obtainFreshBeanFactory()这个方法在AbstractAppl ...

  9. BZOJ2809 [Apio2012]dispatching 可并堆

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ2809 题意概括 n个点组成一棵树,每个点都有一个领导力和费用,可以让一个点当领导,然后在这个点的子 ...

  10. 093实战 Nginx日志切割,以及脚本上传nginx的切割日志

    一:日志切割步骤 命令都在root下进行 1.创建目录 mkdir -p /etc/opt/modules/bin ## 创建文件夹 2.上传cut 3.观察目录 4.修改的cut文件 5.检测 需要 ...