AJAX

最新推荐文章于 2024-10-11 19:23:13 发布

黄框框

最新推荐文章于 2024-10-11 19:23:13 发布

阅读量162

点赞数

本文链接：https://blog.csdn.net/u013306711/article/details/77962539

版权

原生Ajax写法回顾

建立XMLHTTPRequest对象

1. 注册回调函数
  - 当服务器回应我们了,我们想要执行什么逻辑
2. 使用open方法设置和服务器端交互的基本信息
  - 设置提交的网址,数据,post提交的一些额外内容
3. 设置发送的数据，开始和服务器端交互
  - 发送数据
4. 更新界面
  - 在注册的回调函数中,获取返回的数据,更新界面

示例代码:GET get的数据,直接在请求的url中添加即可

<script type="text/javascript">
  // 创建XMLHttpRequest 对象
  var xml = new XMLHttpRequest();

  // 设置跟服务端交互的信息
  xml.open('get','01.ajax.php?name=fox');
  xml.send(null);    // get请求这里写null即可

  // 接收服务器反馈
  xhr.onreadystatechange = function () {
      // 这步为判断服务器是否正确响应
      if (xhr.readyState == 4 && xhr.status == 200) {
          // 打印响应内容
          alert(xml.responseText);
      } 
  };
</script>

示例代码:POST

<script type="text/javascript">
  // 异步对象
  var xhr = new XMLHttpRequest();

  // 设置属性
  xhr.open('post', '02.post.php' );

  // 如果想要使用post提交数据,必须添加
  xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

  // 将数据通过send方法传递
  xhr.send('name=fox&age=18');

  // 发送并接受返回值
  xhr.onreadystatechange = function () {
  // 这步为判断服务器是否正确响应
  if (xhr.readyState == 4 && xhr.status == 200) {
         alert(xhr.responseText);
       } 
  };
</script>`
常见的模板插件

BaiduTemplate(百度开发) ArtTemplate(腾讯开发) velocity.js(淘宝开发) Handlebars