The mental journey of learning the front-end web------Ajax and Json related knowledge


insert image description here

Ajax

1. Concept

  Ajax is Asynchronous Javascript And XML (Asynchronous JavaScript and XML), which uses JavaScript to make a request to the server and process the response without blocking the user's core object XMLHttpRequest. Through this object, your JavaScript can exchange data with the web server without reloading the page, that is, a partial refresh effect can be produced without needing to refresh the page . Ajax uses asynchronous data transfer (HTTP requests) between the browser and the web server , which allows web pages to request small amounts of information from the server instead of the entire page.

2. Application

  1). Use XHTML+CSS to express information;

  2). Use JavaScript to operate DOM (Document Object Model) to perform dynamic effects;

  3). Use XML and XSLT to manipulate data;

  4). Use XMLHttpRequest or the new Fetch API to exchange data asynchronously with the web server;

  • Note: AJAX is differentiated from RIA technologies such as Flash, Silverlight, and Java Applets.

3. Features

  Data can be maintained without updating the entire page. This makes Web applications more responsive to user actions and avoids sending unchanged messages over the network.

  No browser plug-ins are required, but the user is required to allow JavaScript to execute on the browser.

4. Sync

principle

  When the browser sends a synchronous request to the server, the browser will be in a waiting state while the service is processing the synchronous request. After the server processes the request, it will respond with data to the browser and overwrite the original data in the browser's memory. The browser—— Reload the page and display the server response data.
Synchronization refers to the communication method in which the sender sends data and waits for the receiver to send back a response before sending the next data packet.

From the user's point of view, the two waysthe differencein:

  Synchronous - The consumer invokes the service through a single thread; the thread sends the request, blocks while the service is running, and waits for the response. ( The client must wait for the response from the server. The client cannot do anything else while waiting. )
  Asynchronous - the consumer invokes the service through two threads; one thread sends the request, and a separate thread receives the response. ( The client does not need to wait for the server's response. While the server is processing the request, the client can perform other operations )
insert image description here

	// JQeury实现方式
1. $.ajax()
	* 语法:$.ajax({
    
    键值对});
	 //使用$.ajax()发送异步请求
	          $.ajax({
    
    
	              url:"ajaxServlet1111" , // 请求路径
	              type:"POST" , //请求方式
	              //data: "username=jack&age=23",//请求参数
	              data:{
    
    "username":"jack","age":23},
	              success:function (data) {
    
    
	                  alert(data);
	              },//响应成功后的回调函数
	              error:function () {
    
    
	                  alert("出错啦...")
	              },//表示如果请求响应出现错误,会执行的回调函数
	              dataType:"text"//设置接受到的响应数据的格式
	          });
2. $.get():发送get请求
		* 语法:$.get(url, [data], [callback], [type])
				* 参数:
					* url:请求路径
					* data:请求参数
					* callback:回调函数
					* type:响应结果的类型
					* 
3. $.post():发送post请求
	* 语法:$.post(url, [data], [callback], [type])
		* 参数:
			* url:请求路径
			* data:请求参数
			* callback:回调函数
			* type:响应结果的类型

Json

1. Concept

  JSON: JavaScript Object Notation; JSON is a syntax for storing and exchanging data; JSON is text written in JavaScript Object Notation,Is a lightweight data interchange format, JSON is smaller, faster and easier to parse than XML
insert image description here

2. Syntax:

1. 基本规则
	* 数据在名称/值对中:json数据是由键值对构成的
	 * 键用引号(单双都行)引起来,也可以不使用引号
	 * 值得取值类型:
		1. 数字(整数或浮点数)
		2. 字符串(在双引号中)
		3. 逻辑值(true 或 false)
		4. 数组(在方括号中)	{"persons":[{},{}]}
		5. 对象(在花括号中) {"address":{"province":"陕西"....}}
		6. null
	* 数据由逗号分隔:多个键值对由逗号分隔
	* 花括号保存对象:使用{}定义json 格式
	* 方括号保存数组:[]
2. 获取数据:
	1. json对象.键名
	2. json对象["键名"]
	3. 数组对象[索引]
	4. 遍历
 //1.定义基本格式
  var person = {
    
    "name": "张三", age: 23, 'gender': true};
  var ps = [{
    
    "name": "张三", "age": 23, "gender": true},
		    {
    
    "name": "李四", "age": 24, "gender": true},
		    {
    
    "name": "王五", "age": 25, "gender": false}];

insert image description here

Guess you like

Origin blog.csdn.net/S_yyuan/article/details/123470803