ajax实现的几种方式总结

最新推荐文章于 2024-05-08 22:25:31 发布

Nemo_XP

最新推荐文章于 2024-05-08 22:25:31 发布

阅读量3.4k

点赞数

分类专栏： JavaScript和JQuery

本文链接：https://blog.csdn.net/spw55381155/article/details/79896060

版权

JavaScript和JQuery 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

第1种. 最原始的js代码：

环境： webForm下

代码：

<script type="text/javascript">
function createXmlHttp() {//创建xhr对象
var xhobj = false;
try {
xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+
} catch (e) {
try {
xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6
} catch (e2) {
xhobj = false;
}
}
if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari
xhobj = new XMLHttpRequest();
}
return xhobj;
}

window.onload = function () {
document.getElementById('btnCheck').onclick = function () {
var xhr = createXmlHttp();
xhr.open("post", "DoCheckName.ashx", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {

if (xhr.status == 200) {
var json = eval("(" + xhr.responseText + ")");
document.getElementById('render').innerHTML = json.data;
}
}
}
xhr.send("name=" +escape( document.getElementById('txtName').value));//注意：传递中文时通过escape函数进行转码
}
}
</script>

----------------------------------------------------

用户名<input type="text" id="txtName" value="" />
<input type="button" id="btnCheck" value="检测" />
<span id="render"></span>

-----------------------------------------------------------------

DoCheckName.ashx代码如下：

public void ProcessRequest(HttpContext context)
{
if (context.Request.Form["name"] != null)
{
string name = context.Request.Form["name"].ToString();
name = Microsoft.JScript.GlobalObject.unescape(name);
if (name == "张三")
{
context.Response.Write("{'data':'名字是张三'}");
}
else
{
context.Response.Write("{'data':'名字非张三'}");
}

}
else
{
context.Response.Write("{'data':'内部错误！'}");
}

}

代码解析：

使用ajax对象步骤:

1. 先创建XMLHttpRequest的对象,

用上面的兼容性代码创建后,var xhr= createXmlHttp();

2. 设置readystatechange事件触发一个回调函数; -onreadystatechange

xhr.onreadystatechange = function () {

                if (xhr.readyState == 4) {

                    if (xhr.status == 200) {

                        document.getElementById("sp").innerHTML = xhr.responseText;

                        document.getElementById("sp").style.color = "Blue";

                    }

                }

或xhr.onreadystatechange=方法名(注意后面不加括号)

注：在回调函数中检查readyState属性，看数据是否准备就绪(是否等于4)。

如果没有准备好，隔一段时间再次检查。此时，我们无法使用它的属性和方法。因为数据没有下载完

如果已经准备好，就继续往下执行；

200加载正确无误.

3. 打开请求；-open

Get请求 xhr.open("get", "CheckName.ashx?name=3", true);

Post请求: xhr.open("post", "CheckName.ashx", true);

4. 发送请求；-send

Get请求 xhr.send(null);

post请求 xhr.send("uid=" + value);

以上是ajax使用的步骤

5. 注意:

l Get请求 :可设置禁用缓存项

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

l post请求:必须添加请求头

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

l ajax传值时,

xhr.open("get", "CheckName.ashx?name=3", true);

xhr.send("uid=" + value);

value如果是中文,因为中文编码问题,要加上escape(value)转码一下,不然会出错.如 xhr.send("uid=" +escape( value));

同样道理,发送目标的aspx或ashx的名字,如”处理json”,它会报404,(我曾用escape处理过,不能用,我现在没有处理的好办法,暂时目标的名字别带中文,参数的名字要带中文了用escape转一下).可以使用sever.encoding(str)试试或sever.urlencoding(str)

Json的格式不能写错. "{'info':'请填写账号'}" 中间是”冒号”,不是”逗号”

Html注意: :<input type="text" name="txtuid" id="txtuid" value="" onblur="CheckUid()" ;/>

结束标签前不能加”分号”,加上后不能格式化代码

l 请求: xhr.open("post", "CheckName.ashx", true);需要注意,一般我们使用ajax都是用它做一些检测,运算等,不需要页面支撑,所以我们一般都是用一般处理程序, 但是如果这里是向aspx也发送数据时,在aspx后台也进行运算检测时,这时responseText里的内容是检测结果+html代码,因为aspx页面有一个页面生命周期,先走page页response.write(检测内容),然后把结果放入数组,走页面周期,把html代码也放在数组中一块输出,所以通过ajax对象xhr接受的responseText是检测结果+html代码 ,也就是请求目标aspx页面运行后的展示的html内容.(要明白为什么,并清楚ashx,与aspx的区别)

更为详细的内容,请查看ppt或代码

6. 处理json格式的返回数据.

Json的格式不能写错. "{'info':'请填写账号'}" 中间是”冒号”,不是”逗号”

接收数据,仍用responseText接收,然后

var res = eval("(" + json + ")"); //如果传过来是一个json格式,不处理会当字符串用,使用eval()来处理它,不能少了里面的引号和括号

使用: document.getElementById("sp").innerHTML = res.info;//通过"res.键" 来得到 "值"

===============================================================================

第二种：JQery封装后的使用：

 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnCheck").click(function () {
                var name = $("#txtName").val();
                $.post("DoCheckName.ashx", { 'name': escape(name) }, function (data) {
                    var json = eval("(" + data + ")"); //对返回的json格式进行处理.
                    $("#render").text(json.data);
                },"text");

            });
        })
    </script>

----------------------------------------------------

用户名<input type="text" id="txtName" value="" />
<input type="button" id="btnCheck" value="检测" />
<span id="render"></span>

-----------------------------------------------------------------

DoCheckName.ashx代码同第一种：

解析：

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

===============================================================================

第三种：MVC下的JQery代码

view代码

<script src=" <%:Url.Content("../../Scripts/jquery-1.4.1.js")%>" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btnCheck').click(function () {
var name = $('#txtName').val();
$.ajax({
url: "/Home/DoCheckName",
type: "Post",
dataType: "json",//这个地方与控制器传过来的数据类型一致
data: { 'name': name },
success: function (data) {
var json = eval("(" + data + ")"); //对返回的json格式进行处理.
$("#render").text(json.data);
}
});
});
})
</script>

----------------------------------------------

用户名<input type="text" name="name1" id="txtName" value="" />
<input type="submit" id="btnCheck" value="检测" />
<span id="render"></span>

控制器代码

public ActionResult DoCheckName(string name1)//这个地方，必须要与veiw传过来的json一致，不然为空
{
string jsonStr = string.Empty;
name1 = Microsoft.JScript.GlobalObject.unescape(name1);
if (name1 == "张三")
{
jsonStr = "{'data':'名字是张三'}";

}
else
{
jsonStr = "{'data':'名字非张三'}";
}

return Content (jsonStr);
}

解析：

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

===============================================================================

第四种：MicrosoftMVCAJAX封装使用代码

<script src=" <%:Url.Content("../../Scripts/jquery-1.4.1.js")%>" type="text/javascript"></script>
<script src=" <%:Url.Content("../../Scripts/MicrosoftAjax.js")%>" type="text/javascript"></script>
<script src=" <%:Url.Content("../../Scripts/MicrosoftMvcAjax.js")%>" type="text/javascript"></script>

<% using (Ajax.BeginForm("DoCheckName", new AjaxOptions { HttpMethod = "Post", UpdateTargetId="render", InsertionMode =InsertionMode.Replace , OnSuccess = "Render"}))
{ %>
用户名<input type="text" name="name1" id="txtName" value="" />
<input type="submit" id="btnCheck" value="检测" />
<span id="render"></span>
<% } %>
<script type="text/javascript">

function Render(data) {
var json = eval("(" + data + ")"); //对返回的json格式进行处理.
$("#render").text(json.data);
}
</script>

----------------------

控制器代码同第三种

解析：

  @using (Ajax.BeginForm(
      new AjaxOptions
      {
          UpdateTargetId = "UserLogOnContainer",
          HttpMethod = "Post",
          OnSuccess = " ",
      })){}　//提交到当前页面，提交方式为Post,异步更新模块ＩＤ为UserLogOnContainer
  
   @using (Ajax.BeginForm("action", "controller", null,
     new AjaxOptions
  {
         UpdateTargetId = "UserLogOnContainer",
         HttpMethod = "Post",
         OnSuccess = " ",
     }))
     {} //提交到指定controller下的action，提交方式为Post,异步更新模块ＩＤ为UserLogOnContainer

注意：使用微软ajax表单控件，必须要引用相应版本的js。 <script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

Nemo_XP

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ajax实现的几种方式总结

第1种. 最原始的js代码：环境： webForm下代码： &lt;script type="text/javascript"&gt; function createXmlHttp() {//创建xhr对象 var xhobj = false; try { xhobj = new Activ...
复制链接

扫一扫