//第一步,创建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. C++实现合并两个已经排序的链表

    /* * 合并两个已经排序的链表.cpp * * Created on: 2018年4月11日 * Author: soyo */ #include<iostream> using nam ...

  2. ORA-01843: not a valid month 错误

    转自:https://blog.csdn.net/jetluning/article/details/48785599 insert into ......的场合发生ORA-01843: not a ...

  3. word-break: break-all word-break:keep-all word-wrap: break-word三者的区别

    word-break属性:指定非CJK脚本的断行规则. 值 描述 normal 使用浏览器默认的换行规则. break-all 允许在单词内换行. keep-all 只能在半角空格或连字符处换行. w ...

  4. 019--python内置函数

    一.内置高阶函数 map函数:接收两个数据 函数和序列,map()将函数调用'映射'到序列身上,并返回一个含有所有返回值的一个列表 num1 = [1,2,3,4,5] num2 = [5,4,3,2 ...

  5. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 07. View的Model 和 Tag Helpers

    student添加一个属性BirthDate 然后把生成数据的地方,字段也加上 建立ViewModel list转换为ViewModel 进一步改进代码 StudentViewModel HomeIn ...

  6. linux C之access函数(转载)

    转自:http://blog.sina.com.cn/s/blog_6a1837e90100uh5d.html access():判断是否具有存取文件的权限 相关函数    stat,open,chm ...

  7. 在Emacs中使用ECB(转载)

    转自:http://joerong666.iteye.com/blog/1813876 By:             潘云登 Date:          2009-7-9 Email:       ...

  8. 算法学习--Day3

    今天搞了一波算法的哈希,代码难道不大,记录在这里吧. 题目描述     “臭味相投”——这是我们描述朋友时喜欢用的词汇.两个人是朋友通常意味着他们存在着许多共同的兴趣.然而作为一个宅男,你发现自己与他 ...

  9. HDU 4542 小明系列故事——未知剩余系 (数论|反素数)

    分析 kuangbin的blog已经讲的很好了,我做一点补充 1.当做x*y>z的比较时,如果x \(\ast\) y过大,可以写成x>z/y 2.分解质因数时选择用f[][0]保存质数, ...

  10. 51nod1432【贪心】

    对于每个数我找一个和他相加最接近独木舟,然后ans+=1; 想复杂了,直接两端来就好了. 然后两个相加如果<=m那么就让它们在一起,不是的话就让大的一艘船,然后继续搞(贪心) #include ...