码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-04-28 22:33:46      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:

本人初学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本鸟也是刚刚开始学,希望写的这些东西能够帮助一些人。有些不足的地方欢迎大神指点。
 
 
 

 

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

标签:

原文地址:http://www.cnblogs.com/zx1997/p/4464124.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!