2019-08-20 Ajax

2019-08-20 本文已影响0人棘菀

Ajax

Asynchronous JavaScript and XML (异步的JavaScript和XML)

是一种在无需重新加载整个网页的情况下能够更新部分网页的技术

ajax不是一种新的编程语言而是一种用于创建更好更快以及交互性更强的Web应用程序技术

c/s 客户端和服务器

b/s 未来的主流浏览器和服务器

现在的产品链：h5+网页+客户端+手机端+小程序

使用ajax 用户可以创建接近本地桌面应用的直接高可用更丰富更动态的web用户界面

利用ajax可以做

注册时输入用户名自动监测用户是否已经存在
登录时提示用户名密码错误
删除数据行时将行ID发送到后台后台在数据库中删除，数据库删除成功后在页面DOM中将数据行也删除

我们可以使用前端的一个标签来伪造一个ajax的样子，iframe标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>伪造ajax</title>
        <style type="text/css">
            * {
                list-style: none;
                transition: all 2s;
            }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>

    </head>
    <body>
        <div>
            <p>请输入要加载的地址: <span id="currentTime"></span></p>

            <p>
                <input type="text" id="url" value="https://www.baidu.com/">
                <input type="button" value="提交" onclick="loadPage()">
            </p>
        </div>
        
        <div id="">
            <h3>加载页面的位置</h3>
            <iframe width="100%" height="500px" id="iframePosition">

            </iframe>
        </div>



        <script type="text/javascript">
            var myDate = new Date()
            document.getElementById("currentTime").innerHTML = myDate.getTime()

            function loadPage() {
                var targetURL = document.getElementById("url").value
                console.log(targetURL)
                document.getElementById("iframePosition").src = targetURL
            }
        </script>
    </body>
</html>

jQuery 提供多个与AJAX有关的方法通过jQuery AJAX方法能使用 HTTP Get和HTTP post 从远程服务器上请求文本,HTML XML或JSON 同时您能够把这写外部数据直接载入到网页的被选元素中

jQuery 不是生产者而是搬运工

jQuery AJAX的本质就是 XMLHttpRequest ，对他基尼想你了封装，方便调用

1 jQuery.get(...)
所有参数
url:待载入页面的url地址
data:待发送 key/value 参数
success：载入成功时回调函数
dataType：返回内容格式，xml json script ，text ，html

2 jQuery.post（...）
所有参数
url:待载入页面的url地址
data:待发送 key/value 参数
success：载入成功时回调函数
dataType：返回内容格式，xml json script ，text ，html

更安全

通用方法：jQuery.ajax（...）
部分参数
url：请求地址
type：请求方式 get post（1.6.0之前用sethod）
header：请求头
I data：要发送的数据
cont

json

1.JavaScript object notation

2.js对象的子集与js无缝对接

3.json数据yujs对象的转换
1. json =》js：json.parse(data)
2. js =>json:json.stringify(jsobj)

协议：世界上任何一所建筑必须有一个地址才能被找到

互联网上的任何一个资源必须有一个URL才能被访问

URL的完整格式：

scheme:方案，指定以哪种协议从服务器获取指定资源；方案名不区分大小写常见：HTTP
.HTTPS.FTP.MAILTO,RTSP,FILE,NEWS,TELNET

port：端口号每项服务在服务器上都对应一个监听端口号一般是80

host:主机名称（域名）

图片.png

user pwd 用户名/密码现在基本不用了

path 路径服务器上资源的本地名称，有一个斜杠将其与前面的URL组件分开

params：参数某些方案会使用参数来制定输入参数每个参数都采用“名/值对”形式，一个URL中可以有多个这个样的使用分号分割

query：查询字符串.默写方案会使用查询字符串传递参数以激活应用程序（比如数据库，公告板，搜索引擎）跟在？后面

frag 锚点 #....

host query path使用的多

HTTP协议：
1.作用
规范了数据是如何打包和传递的
2.Message 消息/报文
message指的是在HTTP客户端与服务器传递的数据块分类：
1.request message：客户端向服务器发送的请求消息
2.response message：服务器根据客户端的请求消息返回给客户端的响应消息

2019-08-20 Ajax

Ajax

json

猜你喜欢

热点阅读