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

 

 

 

 

转载于:https://www.cnblogs.com/zx1997/p/4464124.html