关于ajax的介绍及常用属性说明

北风菌
234 阅读3分钟

最近改Bug遇到了老版本的jsonp页面，在改前端页面的时候需要请求后台数据，这里使用ajax调用后台java写的接口，下面复习一下ajax的使用

ajax实例解析：

$.ajax({
        url: projectName + "/vmp/dataSource/queryFieldListData.do",
        data: {
            //urlPath : projectNameFZ + "/hasTablePermission.do",
            tableName: tableName,
            fieldName: fieldName
        },
        async: false,
        type: "post",
        dataType: "json",
        success: function(result) {
            examplefield = result;
        },
    });

1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。
2.data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
3.async: 要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
4.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
5.dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。
6.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。

function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this;  //调用本次ajax请求时传递的options参数
}

我们都知道ajax是jquery封装好的异步请求方法，那么他的底层是如何实现的呢，如何用原生的js来实现异步请求呢，这需要借助XMLHttpRequest对象，XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

  • XMLHttpRequest 是 AJAX 的基础。
  • XMLHttpRequest 术语缩写为XHR，中文可以解释为可扩展超文本传输请求。
  • XMLHttpRequest 对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。
  • XMLHttpRequest的对象用于客户端和服务器之间的异步通信。

它执行以下操作：

  1. 在后台从客户端发送数据
  2. 从服务器接收数据
  3. 更新网页而不重新加载。

使用XML实现ajax请求的五个步骤

  1. 创建XMLHttpRequest异步对象
var xhr;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xhr=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
  }
  1. 设置回调函数
xhr.onreadystatechange = callback
  1. 使用open方法与服务器建立连接
// get 方式
xhr.open("get", "test.php", true)

// post 方式发送数据 需要设置请求头
xhr.open("post", "test.php", true)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
  1. 向服务器发送数据
// get 不需要传递参数
xhr.send(null)

// post 需要传递参数
xhr.send("name=jay&age=18")
  1. 在回调函数中针对不同的响应状态进行处理
function callback() {
  // 判断异步对象的状态
  if(xhr.readyState == 4) {
    // 判断交互是否成功
    if(xhr.status == 200) {
      // 获取服务器响应的数据
      var res = xhr.responseText
      // 解析数据
      res = JSON.parse(res)
    }
  }
}
avatar
文章
阅读
粉丝