Ajax基础入门

reclay 发布于2019-08-26 10:55 / 1696人阅读

摘要：一是什么的全称是，其中，是异步的意思。一定要注意如果请求是请求格式必须设置请求头字符串拼接模板字符串

一、ajax是什么？

1、ajax 的全称是Asynchronous JavaScript and XML，其中，Asynchronous 是异步的意思。 
2、是7种技术的综合，它包含了：JavaScript、xml、xstl、xhtml、dom、 xmlhttprequest、css   
3、ajax是一个与服务器端语言无关技术
4、ajax返回的数据格式（文本格式、xml、json）
5、作用：
        1、页面五刷新的动态数据交互
        2、局部刷新页面
        3、界面的美观
        4、对数据库的操作
        5、可以返回简单的文本格式，也可以返回xml文件格式、json数据格式
      
6、原理
        数据库
         ↑ ↓
         ↑ ↓
        服务器
          ↑ ↓
http请求  ↑ ↓  http响应（文本/json/xml）
          ↑ ↓
     创建ajax引擎对象
      （浏览器）       相当于是一个代理 （帮我买东西，这个就类似ajax 我自己干自己事情）
    (XmlHttpRequest)
         ↑ ↓
         ↑ ↓
         页面

二、传统三种方式浏览器向服务器发送请求

1、url 回车 刷新
2、特定元素href或者src
3、表单

三、发送Ajax

// 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器
var xhr = new XMLHttpRequest()

// 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
xhr.open("GET", "./time.php")

// 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求
xhr.send(null)

// 4. 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作
xhr.onreadystatechange = function () {
// 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
    if (this.readyState === 4) {
    // 通过 xhr 的 responseText 获取到响应的响应体
        console.log(this)
    }
}

四、状态码

0:初始化请求代理对象
1:open方法已经调用,建立一个与服务端特定端口的连接
2:已经接受到响应报文的响应头,但拿不到题体
3:正在下载响应报文的响应体，有可能响应体为空，也有可能不完整 // 在这里处理响应体不保险
4: 一切ok 整个响应报文都下载下来

五、请求方法

get方法:通常在一次 GET 请求过程中，参数传递都是通过 URL 地址中的 ? 参数传递。

HTML


JS
var listElement = document.getElementById("list");

var xhr = new XMLHttpRequest();
// 这里任然是使用URL中问号参数传递数据
xhr.open("GET", "users.php");
xhr.send(null);
xhr.onreadystatechange = function () {
    if (this.readystate != 4) return
    console.log(this.responseText)
    var data = JSON.parse(this.responseText)
    for (var i = 0; i < data.length; i ++) {
        var liElement = document.createElement("li");
        liElement.innerHTML = data[i].name;
        // 设置每个元素的id
        liElement.id = data[i].id
        listElement.appendChild(liElement)
        listElement.children[i].addEventListener("click", function () {
            // TODO： 通过ajax操作获取对应的信息  
            // 如何获取当前被点击元素的ID
            var xhr1 = new XMLHttpResquest();
            xhr1.open("GET", "users.php?id"+this.id);
            xhr1.send(null);
            xhr1.onreadystatechange = function () {
                if (this,readystate != 4) return;
                var obj1 = JSON.parse(this.responseText)
                alert(obj1.age)
            }
        }) 
    }
}

// 给每一个li注册一个点击事件
// 应为li后来动态创建,不能在这里动态生成  应该移上面
// for (var i = 0; i < listElement.children.length; i ++) {
//    listElement.children[i].addEventListener("click", function () {
//        console.log(11)
 //   })
//}

Post方法：请求过程中，都是采用请求体承载需要提交的数据。

JS
var btn = document.getElementById("btn");
var txtUsername = document.getElementById("username");
var txtPassword = document,getElementById("password")
btn.onclick = function () {
    var username = txtUsername.value;
    var password = txtPassword .value;
    var xhr = new, XMLHttpRequest();
    xhr.open("POST", "login.php");
    // !!!! 一定要注意 如果请求是post请求 urlencoded 格式 必须设置请求头
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
    // 字符串拼接
    // xhr.send("username=" + username + "&password=" + password)
    // 模板字符串
    xhr.send(`username=${username}&password=${password}`);
    xhr.onreadystatechange = function () {
        if ( this.readystate != 4) return;
        console.log(this.responseText)
    }
}

云服务器 GPU云服务器 ajax基础教程入门基础基础入门 python入门基础

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106837.html

【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0
前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
【前端】javascript__ajax基础知识入门

摘要：文章标题采用命名规范。所以，实际上是由微软发明了。将用于处理请求的函数绑定在对象的事件上即可。代表异步，代表同步。首先，这个函数需要跟踪请求的状态变化。如果状态返回值为，代表服务器响应完成，否则，你需要继续跟踪状态。使用来判断请求是否成功。文章标题采用BEM命名规范。因为笔者想重新夯实一下技术，因此翻译了MDN上的ajax介绍。英文原文 Ajax是啥 Ajax全名是Asynchron...

YJNldm 2019-08-20 13:34 评论0 收藏0
ajax入门

摘要：不会给后端发送请求。只会复制粘贴，原理啥的也不了解，现在的项目是用，但是是以为基础的，所以先学一波。可以做到局部刷新，无需重新刷新页面，拥有更好的用户体验。具体的优缺点可以看后面的链接，里面还详讲了三次握手和请求的优缺点不会给后端发送请求。只会复制粘贴，原理啥的也不了解，现在的项目是用axios，但是axios是以Ajax+Promise为基础的，所以先学一波Ajax。Ajax可以做...

cooxer 2019-08-23 17:21 评论0 收藏0