美文网首页
原生ajax

原生ajax

作者: Zdigi | 来源:发表于2018-09-26 12:48 被阅读0次

XMLHttpRequest 对象
  XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest

五步使用法:
1.创建XMLHTTPRequest对象
2.使用open方法设置和服务器的交互信息
3.设置发送的数据,开始和服务器端交互
4.注册事件
5.更新界面
get请求

//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open('get','getUserServlet?Name='+name);
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
   if (ajax.readyState==4 &&ajax.status==200) {
    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
    console.log(ajax.responseText);//输入相应的内容
    }
}  

post请求

//创建异步对象  
var xhr = new XMLHttpRequest();
//设置请求的类型及url
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xhr.open('post', 'postUserServlet' );
//发送请求
xhr.send('name=zdigi&age=18');
xhr.onreadystatechange = function () {
    // 这步为判断服务器是否正确响应
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  } 
};  

相关文章

  • Ajax

    标签: Ajax 正文 一、实现一个原生Ajax 二、Ajax状态 三、将原生的 ajax 封装成 promise

  • js和jq的ajax调用

    原生ajax jQuery的ajax

  • html5的ajax学习(三)

    一.原生的ajax封装 原生的ajax的调用 二.jquery的ajax 2.1 jquery的语法 三. fun...

  • 原生ajax和jquery中的ajax

    原生的ajax请求方法: jquery中的ajax:

  • ajax

    原生ajax配置详解 对ajax简单封装 调用

  • Ajax Axios

    关于Ajax兼容性问题 前端原生Ajax(get方式),后端使用node.js 前后端代码: 前端原生Ajax(p...

  • ajax封装

    原生ajax封装

  • AJAX

    主要内容: ajax 是什么、原生ajax 写法和jQuery ajax写法。 AJAX 是什么 ajax,即As...

  • [转]JS原生Ajax代码示例

    文章来源: JS原生Ajax和jQuery的Ajax与代码示例 -- 苏凯勇往直前 JS原生的Ajax其实就是围绕...

  • ajax总结

    1. Ajax 1.1 原生JavaScript封装Ajax 1.2 jquery ajax 及其 快捷方法 $....

网友评论

      本文标题:原生ajax

      本文链接:https://www.haomeiwen.com/subject/yppdoftx.html