如何使用ajax实现网页无刷新以及简单掌握Json

本人初学ajax,写出本人ajax的一些浅薄的经验。

ajax简称(异步JavaScript和XML)。异步指的是当向浏览器发送一条请求,不需要等请求响应还可以继续发送若干条请求而且不会阻碍用户。

ajax是与服务器交换数据并更新部分网页的技术,可是实现网页无刷新。

例如用ajax删除一跳信息,实现无刷新:

Index视图:

<script type="text/javascript">

function mysuccess(data) {
//data就代表服务器响应给客户端的数据
$("#" + data).fadeOut();
}

</script>

@foreach (var item in Model) {

<tr id="@item.GroupId">

<td>
          @Html.DisplayFor(modelItem => item.GroupId)
</td>
<td>
          @Html.DisplayFor(modelItem => item.GroupName)

</td>

<td>

@Ajax.ActionLink("删除", "Delete", new { id = item.GroupId }, new AjaxOptions() { 
          Confirm="确定要删除吗",
          HttpMethod="post",
         OnSuccess="mysuccess"
})

</td>

</tr>

}

控制器:

public ActionResult Delete(int id)
{

var group = db.PrivateGroups.Where(c => c.GroupId == id).FirstOrDefault();
db.PrivateGroups.Remove(group);
try
{
int count= db.SaveChanges();
if (count>0)
{
//删除成功
return Content(id.ToString());
}
else
{
return Content("0");
}
}
catch (Exception)
{
return Content("0");
}
}

ajax内部核心是xmlhttprequest,如何创建xmlhttprequest 代码如下:

<script language="javascript" type="text/javascript">
<!--
    var xmlhttp;
    // 创建XMLHTTPRequest对象
    function createXMLHTTPRequest(){
        if(window.ActiveXObject){ // 判断是否支持ActiveX控件
            xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // 通过实例化ActiveXObject的一个新实例来创建XMLHTTPRequest对象
    }
    else if(window.XMLHTTPRequest){ // 判断是否把XMLHTTPRequest实现为一个本地javascript对象
        xmlhttp = new XMLHTTPRequest(); // 创建XMLHTTPRequest的一个实例(本地javascript对象)
    }
    }
//-->
</script>

xmlhttprequest对象的一些方法

Open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword)

//bstrMethod:可以设置post,get请求

//bstrUrl:目标地址

//varAsync:设置是否异步,默认是为true

//bstrUser:验证的用户名称,bstrPassword也就是验证的用户密码。

Send()

Dim xmlhttp As New Msxml2.xmlhttp
xmlhttp.open "GET", "http://localhost/sample.xml", False
xmlhttp.send
MsgBox xmlhttp.responseXML.xml

注意 :调用Open()后,必须调用Send()发送请求和数据给服务器。

Abort():取消http请求

oXMLHttpRequest.abort取消以后请求将会被返回为UNINITIALIZED状态,下次调用时必须使用Open方法。

现在来讲下JSON:

Json是一种轻量级的数据交换格式,它易于人阅读和编写,同时也易于机器解析和生成(网络传输速度)。

JSON 数据的书写格式是:名称/值对。

名称/值对组合中的名称写在前面(在双引号中),值对写在后面(同样在双引号中),中间用冒号隔开:

"firstName":"John"

"firstName":"John"换成JavaScript 语句就是firstName=”John”

示例语句:

var result =

{

"people":[

{"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"},

{"firstName":"Jason","lastName":"Hunter","email":"bbbb"},

]

}

JavaScript 解析上面这段代码:

fucntion()

{

$.each(result.people ,fucntion(i,dom){

  alert(dom.firstName);

})

}

//  输出结果 :Brett, Jason

以上就是本鸟总结的一些使用方法(),xmlhttprequest本鸟也是刚刚开始学,希望写的这些东西能够帮助一些人。有些不足的地方欢迎大神指点。

时间: 2024-08-02 10:57:29

如何使用ajax实现网页无刷新以及简单掌握Json的相关文章

jQuery+AJAX实现网页无刷新上传

新年礼,提供简单.易套用的 jQuery AJAX上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 (不论是否 ASP.NET),内附的 FileUpload 控件,功能不足 (页面必须刷新.不支援 AJAX),或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观).网路上虽已有许多可用的示例,如: jQuery File Upload,但功能太强大.外观复杂,欲仅取出部分功能来引用,反而不易.

js界面刷新&Django使用Ajax实现页面无刷新评论回复功能

Django使用Ajax实现页面无刷新评论回复功能 http://www.cnblogs.com/mfc-itblog/p/5188900.html js界面刷新 http://www.cnblogs.com/dingdingo/archive/2011/10/26/2225307.html js界面刷新&Django使用Ajax实现页面无刷新评论回复功能

jQuery+AJAX+Struts实现无刷新分页

jQuery+AJAX+Struts实现无刷新分页 说明: 1.需要jQuery插件js文件: 2.使用myeclipse添加struts能力: 从前从客户端页面向服务器发送Ajax请求,需要在js中先创建XMLHttpRequest对象,对象创建好以后使用OPEN('GET/POST',URL,同步/异步)设置提交方式,URL地址,使用同步还是异步方式.然后使用send(data)向服务器发送数据,同时使用onreadystatechange来绑定回调函数.如果是使用GET方式提交数据,那么就

本篇文章主要是对jquery+ajax+C#实现无刷新操作数据库数据的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如何使用jquery的ajax来实现无刷新的获取内容 我们只是单方面的获取内容,分页等就不考虑了,后期会讲到无刷新的分页 页面中我们放置一个Div容器用来存放返回的内容 <div id="comment"><img src="images/Wait.gif&quo

jQuery AJAX 网页无刷新上传示例

新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 (不论是否 ASP.NET),内附的 FileUpload 控件,功能不足 (页面必须刷新.不支援 AJAX),或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观).网路上虽已有许多可用的示例,如: jQuery File Upload,但功能太强大.外观复杂,欲仅取出部分功能来引用,反而不易

Ajax+Asp.Net无刷新分页

1.新建解决方案,并建立四个项目BLL,DAL,Model,PagerTest,如图所示: 2.Model代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Model { public class Person { /// <summary> /// 编号 /// </summary> public int Id { get; set;

Django使用Ajax实现页面无刷新评论回复功能

虽然Django本身自带Form可以提交表单,但在Django中结合Jquery使用Ajax,可以让Django开发的应用发挥更好的用户体验,同时可以降低服务器的负担.普通提交表单方式需要刷新整个页面才可以将评论显示出来,而使用Ajax提交评论之后,可以在页面无刷新的情况下显示出来. 首先是model: class Replay(models.Model): content = models.TextField() post = models.ForeignKey(Post) replay_ti

HTTP与AJAX深入揭秘,不使用AJAX实现页面无刷新

AJAX的原理是什么? 实际上就是发起HTTP请求,既然就是发起HTTP请求,那只要我们能够实现发起HTTP请求就可以在不使用AJAX的情况下实现相同的效果. 在前端有好多方式可以发起HTTP请求,比如script标签的src以及图片的src,css背景图片,等等. 案例1:通过HTTP状态码204实现页面无刷新 下面来一个小案例,实现一个页面无刷新的投票功能. html: <div id="box"> <h1>周杰伦</h1> <p>0

jquery+ajax(用ajax.dll)实现无刷新分页

利用ajax.dll那种方式的无刷新,在这就不说了,新朋友可以看下我的另一片文件http://www.cnblogs.com/dachuang/p/3654632.html 首先,这里用的是jquery自带的分页方法,所以要引用下面3个js文件 <script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script> <script type="tex