首先创建XMLHttpRequest对象，利用此对象发送请求

主页面

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用Ajax</title>

<script type="text/javascript">

function vote(){

    //XmlHttpRequest对象，一个专门的HTTP请求工具

    /*

    实现Ajax要考虑的内容：

    1，用什么请求方式

    2，请求哪个资源(url)

    3，同步还是异步

    */

    var xhr=new XMLHttpRequest();

    // document.write(xhr);

    // alert(xhr);

    // console.log(xhr);//在IE10以下版本console未定义

    //单向请求

    xhr.open('GET','./01.php',true);//打开连接

    //请求方法，请求地址，同步还是异步

    xhr.send(null);//发送请求，不发送数据

    alert(xhr.responseText);

    alert("hello");

}

</script>

</head>

<body>

    <form action="" method="post">

        <p>用户名:<input type="text" name="username"/></p>

        <p>密码:<input type="password" name="pwd"/></p>

        <p><input type="submit" value="注册" onclick="vote()"/></p>

    </form>

</body>

</html>

返回值为01.php中echo的内容

同步与异步的理解

等待send()执行完毕之后，再执行后面的语句为同步  false

不等带send()的是否执行，直接执行后面的语句为异步 true


xhr对象在请求和响应过程中，状态会不断变化，1-4逐步变化，到4时，表示成功

可以绑定一个函数，来监听状态的改变，最终实现接收最后响应信息

添加以下代码，用异步传输

//状态变化的回调函数

    xhr.onreadystatechange=function(){

        if(xhr.readyState==4){

            alert("请求成功了");

            alert(xhr.responseText);//弹出返回信息,responseText是属性不是方法

        }

    }

ajax发送请求的更多相关文章

  1. ajax发送请求跨域 - uri java代理

    问题:ajax发送请求出现cors跨域 解决办法:可以通过java代理的方式,后台发送请求 1.get请求 public void proxyGet(String url) { try { URL r ...

  2. Ajax发送请求等待时弹出模态框等待提示

    主要的代码分为两块,一个是CSS定义模态框,另一个是在Ajax中弹出模态框. 查看菜鸟教程中的模态框教程demo,http://www.runoob.com/try/try.php?filename= ...

  3. Ajax - 发送请求原理

    1,什么是ajax? Asynchronous JavaScript and XML(当然现在xml已经由json代替): 主要是用于前后台的交互(表单提交已经被废弃): 使用场景:前台获取数据.表单 ...

  4. ajax对象。同步与异步及ajax发送请求

    ajax对象的属性.方法 属性 readyState: Ajax状态码 * 0:表示对象已建立,但未初始化,只是 new 成功获取了对象,但是未调用open方法 1:表示对象已初始化,但未发送,调用了 ...

  5. Django——Ajax发送请求验证用户名是否被注册

    场景: 用户注册的时候,输入用户名之后,Ajax发送请求到后端,后端验证该用户名是否已经被注册,然后返回到注册页面提示用户. 1.模型: from django.db import models cl ...

  6. 原生Ajax发送请求

    ajax  get&post 1.使用get发送请求,会有请求缓存 1)什么叫请求缓存,请求信息相同浏览器不会再向服务器发送请求,导致访问服务器失败. 2)解决:将随机数添加到请求路径后面参数 ...

  7. angularjs --- ngResource 类似于 ajax发送请求。

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  8. Ajax发送请求的四个步骤

    1.创建XMLHttpRequest let xhr=new XMLHttpRequest; 2.连接服务器 xhr.open("get","goods.json&quo ...

  9. flask ajax发送请求返回400

    在flaskWTF使用csrf保护后,一般提交form表单都需要一个隐藏的csrf 这样可以成功提交,但是使用ajax提交时就不能成功提交,会返回400错误,服务器无法理解请求,这样就需要新的方法解决 ...

随机推荐

  1. Spark 0.9的安装配置

    一.上传scala2.10.3到linux 下载scala 2.10.3文件.网上的scala-2.10.3.tgz.scala-2.10.3.rpm,前者支持unix,后者专门给linux使用.但我 ...

  2. Tomcat普通用户启动注意事项

    今天项目部署上线,老大跟我建议说不要使用root用户部署,试用普通用户运行.刚开始没想什么,后来部署的时候碰到各种权限问题. 记录一下,以防忘记了. 1.使用普通用户启动失败. 首先不用想就去＄TOM ...

  3. Spring MVC整合logback日志框架实战

    1.引入依赖,本项目maven构建,普通项目导入想要的jar包即可 版本 <properties> <slf4j-api.version>1.7.7</slf4j-api ...

  4. 解决dwr报错【 Error: java.lang.SecurityException: No class by name: service】

    打开包含dwr的网页时后台报错: 警告: Names of known classes are: __System DwrQueryService 十二月 11, 2015 10:24:44 上午 o ...

  5. HTTP,HTTP2.0,SPDY,HTTPS你应该知道的一些事

    作为一个经常和web打交道的程序员,了解这些协议是必须的,本文就向大家介绍一下这些协议的区别和基本概念,文中可能不局限于前端知识,还包括一些运维,协议方面的知识,希望能给读者带来一些收获,如有不对之处 ...

  6. 关于 Java 对象序列化您不知道的 5 件事

    数年前,当和一个软件团队一起用 Java 语言编写一个应用程序时,我体会到比一般程序员多知道一点关于 Java 对象序列化的知识所带来的好处. 关于本系列 您觉得自己懂 Java 编程?事实上,大多数 ...

  7. Java HashMap 核心源码解读

    本篇对HashMap实现的源码进行简单的分析. 所使用的HashMap源码的版本信息如下: /* * @(#)HashMap.java 1.73 07/03/13 * * Copyright 2006 ...

  8. Java NIO 备忘

    $.backlog:可以把它简单理解为一个 listening socket 的请求连接队列的限制.当队列中的连接请求达到队列限制时,kernel 会拒绝信的连接请求.只有当应用程序通过 accept ...

  9. 详解struts.multipart.saveDir的临时文件路径

    Struts2中的struts.multipart.saveDir主要是用来设置上传文件的临时目录,在不同的配置方式下,它的临时文件目录大有不同,好多人在设置后往往找不到这个临时目录在哪里,下面我就来 ...

  10. datagridview控件--导出Excel

    dataGridView控件可以说很方便的显示了数据,而且对于修改和删除数据也很方便,我在前面的一篇博客中写到了如何去绑定数据到该控件上dataGridView控件--绑定数据方法,今天我将如何将数据 ...