Ajax总结

AJAX=Asynchronous JavaScript and XML（异步的JavaScript和XML）

了解：

打开终端的快捷键：window+R==>CMD==>ipconfig

Xml 是一种数据存储格式 抛弃了

Json 是一种数据存储格式  当前最流行的

Jq提供了$.ajax({})

AJAX不是新的编程语言，而是一种使用现有标准的新方法。(前后台数据交互依赖的一项技术）

AJAX的最大的优点是在不重复加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上运行。

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

 AJAS的本质就是xmlHttpRequest对象

控制台出现的三个属性：

readyState   请求的五个阶段 0 1 2 3 4

responseText 返回的文件内容

Status 状态码  返回的状态信息(200--成功、3XXX---禁用、404--文件没有找到、5xxx代表服务器的问题）

在_proto_有三个方法：

open（）send() onReadyStateChange()

ajax的js写法

function ajax(methods,url,sync,fn){

// 第一步 创建xmlhttprequest对象
　　var xmlhttp=new XMLHttpRequest();
// 第二步 给后台发送请求
　　xmlhttp.open(methods,url,sync)
// 第三步 发送
　　xmlhttp.send()
// 第四步 服务器相应
　　xmlhttp.onreadystatechange=function(){
　　　if(xmlhttp.readyState==4){
　　　　if(xmlhttp.status==200){
　　　　　　// console.log(typeof xmlhttp.responseText)
　　　　　　// var arr=JSON.parse(xmlhttp.responseText)
　　　　　　　　// console.log(arr)
　　　　　　　　　　fn(xmlhttp.responseText)
　　　　　　　　// document.getElementById("div").innerHTML=arr[0].name
　　　　　　}
　　　　}
　　}
}

AJAX传参

　　客户端和服务器

　　1.请求　request

　　2.响应 　response

　　ajax的请求方式

　　Get：看的见，传送数据小，通过网络地址传

　　post：看不见，传输数据大一些，通过http中的某一个body属性

　　

跨域

1.定义：不在同一服务器下，就是协议、域名、端口三者有一个不一样的就是跨域。

2.同源策略：请求的地址和浏览器的地址必须在同域下，就是协议端口域名都一样

3.http://172.164.130.56:80(其中http是协议、172是IP地址、80是端口

协议在互联网上有两种：http和https

解决跨域

　　靠标签上的src属性解决，利用script标签上的src属性去请求外部的数据看网络地址关键字cb和callback

跨域

 1.看数据

$(function(){
　　$.ajax({
　　　　type:"get",
　　　　url:"http://127.0.0.1:8088/www3.12/admin/as.js",
　　　　async:true,
　　　　data:{wd:"a"},
　　　　dataType:"jsonp",
　　　　jsonp:"cb",
　　　　jsonpCallback:"fn",(fn==>as.js)
　　　　success:function(data){
　　　　　　console.log(data)
　　　　}
　　})
})

2.看地址

$(function(){
　　$.ajax({
　　　　type:"get",
　　　　url:"http://sp1.baidu.com/5b11zupBgM18t7jm9iCKT-xh_/sensearch?",
　　　　async:true,
　　　　data:{wd:"a"},
　　　　dataType:"jsonp",
　　　　jsonp:"cb",(cb=>sensearch?后面)
　　　　success:function(data){
　　　　　　console.log(data)
　　　　}
　　})
})

1.服务器上的写法：

<script type="text/javascript">
　　function fn(data){
　　　　console.log(data)
　　}
</script>

<script src="http://127.0.0.1:8020/2.27/arr.js"></script>

arr.js上的写法

fn([
　　{"name":"zhangsan","age":23},
　　{"name":"zhangsan","age":23},
　　{"name":"zhangsan","age":23},
　　{"name":"zhangsan","age":23}
])

2.关键字cb和callback

<script>
　　function fn(data){
　　　　console.log(data)
　　}
</script>
<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=26525_1457_21101_28607_28584_26350_28603_28625_27543&req=2&csor=1&cb=jQuery11020949313022271028_1552290622696&_=1552290622700"></script>
3.dom的形成

<script>
　　var script=document.createElement("script")
　　script.src="https://sp1.baidu.com/5b11fzupBgM187jm9iCKT-xh_/sensearch?wd=崔&cb=fn"
　　document.body.appendChild(script)
　　　　function fn(data){
　　　　　　console.log(data)
　　　　}

 </script>

jq中的iframe
Load...将服务器中的数据加载到指定的元素中
案例：一个网站有许多页面，但是头部和尾部都一样，可以使用load
load传参：
load传参是以post方式发送的PHP后台用post接收或request接收

js

　　$("div").load("http://127.0.0.1:8020/3.11/load.php?__hbt=1552295319191",{txt:"cuicui"})

php

　　<?php
　　　　echo $_REQUEST['txt'];
　　?>
jq中的get

　　$(function(){
　　　　$.get("get.php",{name:"zhangsan"},function(data){
　　　　　　console.log(data)
　　　　})

　　})

jq中的post

$(function(){
　　$.post("post.php",{name:"zhangsan"},function(data){
console.log(data)

})
jq中的ajax

$(function(){
　　$.ajax({
　　　　type:"post",
　　　　url:"post.php",
　　　　async:true,
　　　　data:{name:"list"}
　　　　success:function(data){
　　　　　　console.log(data)
　　　　}
　　})
})
jq中的ajax跨域问题

js
$(function(){
　　$.ajax({
　　　　type:"get",
　　　　url:"http://127.0.0.1:8020/3.11/01.txt?__hbt=1552292240994",
　　　　async:true,
　　　　data:{wd:"a"},
　　　　dataType:"jsonp",
　　　　jsonp:"cb",
　　　　jsonpCallback:"fn",
　　　　success:function(data){
　　　　　　console.log(data)
　　　　}
　　})
})

get.txt
fn([12,24])
前端给后台提交数据的方式

 ajax的请求方式有八种：
　　OPTIONS(options)：返回服务器针对特定资源所支持的HTTP请求，也可以利用向Web服务器发送'*'的请求来测试服务器的功能性。
    　HEAD(head)：向服务器索要与GET请求相一致的响应，只不过响应体将不会被返回。这一方法可以在不必传输整个响应内容的情况下，就可以获取包含在响应消息头中的元信息 
　    GET(get)：向特定的资源发出请求
        POST(post)：向指定资源提交数据进行处理请求（例如提交表单或者上传文件），数据被包含在请求体中，POST请求可能会导致新的资源的创建和/或已有资源的修改
　　PUT(put)：向指定资源位置上传其最新内容
　　DELETE(deleted)：请求服务器删除Request-URI所标识的资源
　　TRACE(trace)：回显服务器收到的请求，主要用于测试或诊断
　　CONNECT(connect)：HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器
　　 虽然ajax的请求方式有八种，但常用的有两种，分别为GET和POST 

后台PHP为例
php有三个超全局变量$_GET ,$_POST,$_REQUEST
$_GET.用于存储前台get方法提交的数据，是一数组类型$_GET['name']
$_POST.用于存储前台post方法提交的数据，是一数组类型
$_REQUEST是get和post提交的都存..数组类型
PHP的数组有两种
1.普通数组$arr=[12,56,"fauhofija"]////$arr[0]
2.关联数组...$arr=array("name"=>"zhang","age"=>23)...$arr['name']