<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//jquery方式
function qingqiu(){
 $.ajax({
    type: "POST",
    url: "test.php",
    data: "name=John&location=Boston",
    //data: {name:'John',location:'Boston'},
    success: function(msg){
    $(".show").html(msg);
    }
 });
}

//原生javascript
function qingqiu2(){
 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.getElementByIdx_x("myDiv").innerHTML=xmlhttp.responseText;
   }else if(xmlhttp.status==404){
  document.getElementByIdx_x("myDiv").innerHTML='未找到页面';
   }else{
  document.getElementByIdx_x("myDiv").innerHTML='loading...'; 
   }
 }

xmlhttp.open("POST","test.php",true);
 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xmlhttp.send('name=John&location=Boston');
 
}

</script>
</head>

<body>
<a href="#" class="" onclick="qingqiu2()">请求</a>

<div class="show" id="myDiv"></div>
</body>
</html>

test.php

<?php
header('Content-Type: text/html; charset=utf-8');

$name=$_POST['name'];
$location=$_POST['location'];
print($name.':'.$location."<br />\n");
?>

ajax的两种应用方式的更多相关文章

  1. Ajax的两种实现方式

    //ajax的jquery实现 function aclick(){//alert("測试一");var name = $("#userName").val() ...

  2. ajax的两种使用方式

    一.Ajax概述 1．什么是同步,什么是异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都 ...

  3. Checkbox框全选操作，form表单提交与jquery ajax提交两种处理方式

    //1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...

  4. Struts2实现ajax的两种方式

    基于Struts2框架下实现Ajax有两种方式,第一种是原声的方式,另外一种是struts2自带的一个插件. js部分调用方式是一样的: JS代码: function testAjax() { var ...

  5. Ajax中的get和post两种请求方式的异同

    Ajax中我们经常用到get和post请求.那么什么时候用get请求,什么时候用post方式请求呢? 在做回答前我们首先要了解get和post的区别.   1. get是把参数数据队列加到提交表单的A ...

  6. Ajax的get和post两种请求方式区别

    Ajax的get和post两种请求方式区别 (摘录):http://ip-10000.blog.sohu.com/114437748.html 解get和post的区别. 1. get是把参数数据队列 ...

  7. easyui datagride 两种查询方式

    easyui datagride 两种查询方式function doReseach() { //$('#tt').datagrid('load', { // FixedCompany: $('.c_s ...

  8. 斑马打印机客户端GET和POST，以及后端两种打印方式。

    斑马打印机客户端GET和POST,以及后端两种打印方式. 背景环境:打印机安装在客户端外网.当用户登录时,通过ajax取服务器数据,返回打印机命令,然后客户端通过JS发送给斑马打印机. 1.使用Get ...

  9. Web APi之认证（Authentication）两种实现方式【二】（十三）

    前言 上一节我们详细讲解了认证及其基本信息,这一节我们通过两种不同方式来实现认证,并且分析如何合理的利用这两种方式,文中涉及到的基础知识,请参看上一篇文中,就不再叙述废话. 序言 对于所谓的认证说到底 ...

随机推荐

  1. shell编程：向函数中传递参数

    cal.sh sh cal.sh 20 + 10 实现这样传参的函数(shell不是一个严谨的编程语言,参数这种是不用定义的,函数中直接引用,shell执行中直接写) #!/bin/bash # ca ...

  2. 用java api 实现查询 Hive 数据

    版本:cdh5.4.7, hive1.1.0 pom文件 <dependency> <groupId>org.apache.hive</groupId> <a ...

  3. 结对编程（四则运算题目生成器core第七组）对接心得

    在这篇博客博主想记录一下此次结队编程作业中与ui组对接的心得.在这里我也想表达一下对涂涵越同学的敬佩,他遇到困难时孜孜不倦求解的毅力着实让我佩服,我们在dll的生成上遇到了很大的困难,要不是他的坚持我 ...

  4. SSD网络结构

    SSD算法,其英文全名是Single Shot MultiBox Detector. SSD的网络结构流程如下图所示:SSD总共11个block,相比较于之前的VGG16,改变了第5个block的第4 ...

  5. Spring下载maven

    http://maven.springframework.org/release/org/springframework/spring/

  6. androidstudio 2.3.3 jni过程汇总（2）：2、使用so文件

    2.使用so文件 1.在java文件中System.loadLibrary加载包,并且引入native方法. 2.在app/src/main/下新建jniLibs文件夹,将so包带arm文件夹形式导入 ...

  7. 详解 MySQL int 类型的长度值问题

    以下是每个整数类型的存储和范围 (来自 mysql 手册)

  8. js手机滚屏效果

    原文地址:https://github.com/yanhaijing/zepto.fullpage 第一步:基于移动端的浏览体验,在头部添加浏览器渲染的分辨率 <meta name=" ...

  9. ArrayList,LinkedList,Vector集合的认识

    最近在温习Java集合部分,花了三天时间读完了ArrayList与LinkedList以及Vector部分的源码.之前都是停留在简单使用ArrayList的API,读完源码看完不少文章后总算是对原理方 ...

  10. Hbase表类型的设计

    HBase表类型的设计 1.短宽 这种设计一般适用于: * 有大量的列 * 有很少的行 2.高瘦 这种设计一般适用于: * 有很少的列 * 有大量的行 3.短宽-高瘦的对比 短宽 * 使用列名进行查询 ...