//第一步,创建XMLHttpRequest对象
var xmlHttp = new XMLHttpRequest();
function CommentAll() {
//第二步,注册回调函数
xmlHttp.onreadystatechange =callback1;
//{
// if (xmlHttp.readyState == 4)
// if (xmlHttp.status == 200) {
// var responseText = xmlHttp.responseText; // }
//}
//第三步,配置请求信息,open(),get
//get请求下参数加在url后,.ashx?methodName = GetAllComment&str1=str1&str2=str2
xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?methodName=GetAllComment", true); //post请求下需要配置请求头信息
//xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //第四步,发送请求,post请求下,要传递的参数放这
xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");//" }
//第五步,创建回调函数
function callback1() {
if (xmlHttp.readyState == )
if (xmlHttp.status == ) {
//取得返回的数据
var data = xmlHttp.responseText;
//json字符串转为json格式
data = eval(data);
$.each(data,
function(i, v) {
alert(v);
});
}
} //后台方法
private void GetAllComment(HttpContext context)
{ //Params可以取得get与post方式传递过来的值。
string methodName = context.Request.Params["methodName"]; //QueryString只能取得get方式传递过来的值。
string str1 = context.Request.Form["str1"]; //取得httpRequest传来的值,包括get与post方式
string str2 = context.Request["str2"]; List<string> comments = new List<string>(); comments.Add(methodName); comments.Add(str1); comments.Add(str2); //ajax接受的是json类型,需要把返回的数据转给json格式
string commentsJson = new JavaScriptSerializer().Serialize(comments);
context.Response.Write(commentsJson);
}

上面是代码,那简单总结下如下,要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

(3)设置响应HTTP请求状态变化的函数.

(4)发送HTTP请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.

原生ajax请求的五个步骤的更多相关文章

  1. ajax请求的五个步骤

    创建XMLHttpRequest异步对象 var xhr = new XMLHttpRequest() 设置回调函数 xhr.onreadystatechange = callback 使用open方 ...

  2. 原生AJAX请求教程

    ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...

  3. Servlet处理原生Ajax请求

    萌新小白人生中的第一篇博客,难免会有差错,还望各位大佬多多包涵. 1. Ajax技术简介      Ajax(Asynchronous JavaScript and XML,异步JavaScript和 ...

  4. 原生 ajax 请求

    ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...

  5. 前后端数据交互(二)——原生 ajax 请求详解

    一.ajax介绍 ajax 是前后端交互的重要手段或桥梁.它不是一个技术,是一组技术的组合. ajax :a:异步:j:js:a:和:x:服务端的数据. ajax的组成: 异步的 js 事件 其他 j ...

  6. js原生ajax请求get post笔记

    开拓新领域,贵在记录.下面记录了使用ajax请求的get.post示例代码 //ajax get 请求获取数据支持同步异步 var ajaxGet = function (reqUrl, params ...

  7. JavaScript原生Ajax请求纯文本数据

    源代码 ajax1.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  8. php下的原生ajax请求

    浏览器中为我们提供了一个JS对象XMLHttpRequet,它可以帮助我们发送HTTP请求,并接受服务端的响应. 意味着我们的浏览器不提交,通过JS就可以请求服务器.   ajax(Asynchron ...

  9. AJAX应用的五个步骤

    1.建立xmlHttpRequest对象 if(window.XMLHttpRequest) {    xmlHttp = new XMLHttpRequest();    if(xmlHttp.ov ...

随机推荐

  1. 「LuoguP2434」 [SDOI2005]区间(贪心

    Description 现给定n个闭区间[ai, bi],1<=i<=n.这些区间的并可以表示为一些不相交的闭区间的并.你的任务就是在这些表示方式中找出包含最少区间的方案.你的输出应该按照 ...

  2. jQuery测试结果

    您的回答: 1.下面哪种说法是正确的? 您的回答:jQuery 是 JavaScript 库 2.jQuery 使用 CSS 选择器来选取元素? 您的回答:正确 3.jQuery 的简写是? 您的回答 ...

  3. 开发一个最简单的Cardboard虚拟现实应用(四)做一个Cardboard第一人称控制器

    [开源互助-原创文章,转载请说明出处]第三帖中已经创建了一个cardboard自带的demo应用,但它是不能移动的,玩家只能站在原地,通过头部转动来观察四周,除此之外,玩家并没有更多的手段与游戏场景进 ...

  4. linux下sprintf_s函数的替代(转载)

    转自:http://www.cnblogs.com/yeahgis/archive/2013/01/22/2872179.html windows平台下线程安全的格式化字符串函数sprint_s并非标 ...

  5. Vue-i18n实现语言切换

    方法1 Vue — i18n 国际化 全局配置 安 装 1.直接引入js文件 <script src="https://unpkg.com/vue/dist/vue.js"& ...

  6. jqGrid 编辑完数据后能返回到当前位置的方法

    jqGrid 是一个js的jquery组件,虽然不轻便,但功能还是蛮强大的,也比较方便使用.在数据加载后,经常需要对其中的记录进行编辑,修改完后再返回时需要看到修改后的数据,一般采取重新加载的方法re ...

  7. 洛谷 - P2805 - 植物大战僵尸 - 最大流 - 最大权闭合子图

    https://www.luogu.org/problemnew/show/P2805 最大权闭合子图的特点是,假如你要选一个结点,则要先选中它的所有子节点.正权连S负权连T,容量为绝对值,原图有向边 ...

  8. hdoj5821【贪心-神题】

    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊,比赛的时候直接读错题了,实力带坑队友.... 题意: 有两个序列都代表筐,每个筐里只有一个球,然后序列的值代表筐里的球的颜色,问你在m次操作后,a序列的球能否变成b ...

  9. CSS常见的五大布局

    本文概要 本文将介绍如下几种常见的布局: 一.单列布局 常见的单列布局有两种: header,content 和 footer 等宽的单列布局 header 与 footer 等宽,content 略 ...

  10. JSP | 基础 | 在同一表单中提交两个不同的action

    通过与跟JS配合使用实现需求 <head> <title>Chat Room</title> <script type="text/javascri ...