<input type="button" value="异步请求"id="btn">

<script>

实现ajax的异步交互的步骤

var btn document.getElementById("btn”);

btn.onclick=function(){

//创建XMLHttpRequest对象

var xhr=getXhr();

/*与服务器建立连接*/

xhr.open("get","01.php?"user=zhangwuji");

//客户端向服务器端发送请求

xhr.send(null);

//客户单接受服务器端的响应

xhr.onreadystatechange=function(){

if(xhr.readyState=4){

if(xhr.status=200){

var data=xhr.responseText;

console.log(data);

}

}

}

//定义创建xmlHttp对象的函数

function getXhr(){

var xhr=null;

if(window.XMLHttpRequest){

xhr=new XMLHttpRequest();

}else{

xhr=ActiveXObject("Microsoft.XMLHttp");

}

return xhr;

</script>

实现AJAX的异步交互的步骤的更多相关文章

  1. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  2. 原生Ajax实现异步交互

    实现Ajax主要依靠XMLHttpRequest对象,所以首先要创建XMLHttpRequest对象 function getXhr(){ var xhr = null; if(window.XMLH ...

  3. AJAX 异步交互基本总结

    AJAX (Asynchronous JavaScript and Xml) 直译中文 - javascript和XML的异步 同步与异步的区别: 同步交互 执行速度相对比较慢 响应的是完整的HTML ...

  4. ajax_异步交互-get/post方式

    Ajax的异步交互: 客户端向服务器端发送请求,直到服务器端进行响应,这个过程中,用户可以做任何其他事情(不等). 实现Ajax的异步交互步骤(举例说明): get方式: 1.创建XMLHttpReq ...

  5. Ajax简单介绍和使用步骤

    Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写).现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. 同步是指:发送方发出数据后,等 ...

  6. Ajax异步交互基础

    1. ajax是什么? * asynchronous javascript and xml:异步的js和xml * 它能使用js访问服务器,而且是异步访问! * 服务器给客户端的响应一般是整个页面,一 ...

  7. spring mvc 和ajax异步交互完整实例

    Spring MVC 异步交互demo: 1.jsp页面: <%@ page language="java" contentType="text/html; cha ...

  8. ajax实现异步前后台交互,模拟百度搜索框智能提示

    1.什么是异步?在传统的网站项目中,填写一堆数据,最后点击提交,在点击提交的这一刻才实现数据提交,前后台交互.在你点击提交之前数据是没有提交到后台的.这样就会造成很大的不便.比如,我填了一大堆数据,结 ...

  9. Ajax异步交互 [异步对象连接服务器]

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>X ...

随机推荐

  1. Web开发中最致命的8个小错误

    错误1:表单的label标签跟表单字段没有关联 利用“for”属性允许用户单击label也可以选中表单中的内容.这可以扩大复选框和单选框的点击区域,非常实用. 错误2:logo图片没有链接到主页 点击 ...

  2. js动画之同时运动

    一个物体可以同时做多个运动,而不是完成一个运动再一个运动,而是让你感觉他们是同时发生的. 直接上代码 <!DOCTYPE html> <html lang="en" ...

  3. undefined reference to `Spreadsheet::staticMetaObject'

    <C++ GUI Qt 4 编程>学习 一.遇到的问题 在学完第4章后,Spreasheet程序也已经写好了.在用 FindDialog 搜索时发现没有效果. 二.解决过程 调试跟踪代码, ...

  4. break into Ubuntu System

    This morning, I got a spare machine from of of the labmates. The OS is ubuntu 12.04. I could not log ...

  5. SharePoint SC "Audit Settings"功能与CSOM的对应

    博客地址:http://blog.csdn.net/FoxDave SharePoint网站集中有个关于审计的功能:"Site collection audit settings&quo ...

  6. HTML5 <video> - 使用 DOM 进行控制

    HTML5 <video> 元素同样拥有方法.属性和事件. 其中的方法用于播放.暂停以及加载等.其中的属性(比如时长.音量等)可以被读取或设置.其中的 DOM 事件能够通知您,比方说,&l ...

  7. [SHELL]判断一个命令是否存在

    首先要说明的是,不要使用which来进行判断,理由如下: 1.which非SHELL的内置命令,用起来比内置命令的开销大,并且非内置命令会依赖平台的实现,不同平台的实现可能不同. # type typ ...

  8. C语言程序设计第9堂作业

    一.本次课主要内容: 本章将散布在前五章中的数据类型和表达式等内容做了归纳性的汇总,本次课需要掌握以下两个方面: (1)本次课通过从数据在计算机内的存储格式入手,介绍整型.字符型.单精度和双精度实型四 ...

  9. 369. Plus One Linked List

    Given a non-negative number represented as a singly linked list of digits, plus one to the number. T ...

  10. 【Python】str类方法说明

    #capitalize():字符串首字符大写 string = 'this is a string.'new_str = string.capitalize()print(new_str)#输出:Th ...